<!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-AbstractComponent-method-constructor'><span id='Ext-AbstractComponent'>/**
</span></span> * @class Ext.AbstractComponent
 * &lt;p&gt;An abstract base class which provides shared methods for Components across the Sencha product line.&lt;/p&gt;
 * &lt;p&gt;Please refer to sub class's documentation&lt;/p&gt;
 * @constructor
 */

Ext.define('Ext.AbstractComponent', {

    /* Begin Definitions */

    mixins: {
        observable: 'Ext.util.Observable',
        animate: 'Ext.util.Animate',
        state: 'Ext.state.Stateful'
    },

    requires: [
        'Ext.PluginManager',
        'Ext.ComponentManager',
        'Ext.core.Element',
        'Ext.core.DomHelper',
        'Ext.XTemplate',
        'Ext.ComponentQuery',
        'Ext.LoadMask',
        'Ext.ComponentLoader',
        'Ext.EventManager',
        'Ext.layout.Layout',
        'Ext.layout.component.Auto'
    ],

    // Please remember to add dependencies whenever you use it
    // I had to fix these many times already
    uses: [
        'Ext.ZIndexManager'
    ],

    statics: {
        AUTO_ID: 1000
    },

    /* End Definitions */

    isComponent: true,

    getAutoId: function() {
        return ++Ext.AbstractComponent.AUTO_ID;
    },

<span id='Ext-AbstractComponent-cfg-id'>    /**
</span>     * @cfg {String} id
     * &lt;p&gt;The &lt;b&gt;&lt;u&gt;unique id of this component instance&lt;/u&gt;&lt;/b&gt; (defaults to an {@link #getId auto-assigned id}).&lt;/p&gt;
     * &lt;p&gt;It should not be necessary to use this configuration except for singleton objects in your application.
     * Components created with an id may be accessed globally using {@link Ext#getCmp Ext.getCmp}.&lt;/p&gt;
     * &lt;p&gt;Instead of using assigned ids, use the {@link #itemId} config, and {@link Ext.ComponentQuery ComponentQuery} which
     * provides selector-based searching for Sencha Components analogous to DOM querying. The {@link Ext.container.Container Container}
     * class contains {@link Ext.container.Container#down shortcut methods} to query its descendant Components by selector.&lt;/p&gt;
     * &lt;p&gt;Note that this id will also be used as the element id for the containing HTML element
     * that is rendered to the page for this component. This allows you to write id-based CSS
     * rules to style the specific instance of this component uniquely, and also to select
     * sub-elements using this component's id as the parent.&lt;/p&gt;
     * &lt;p&gt;&lt;b&gt;Note&lt;/b&gt;: to avoid complications imposed by a unique &lt;tt&gt;id&lt;/tt&gt; also see &lt;code&gt;{@link #itemId}&lt;/code&gt;.&lt;/p&gt;
     * &lt;p&gt;&lt;b&gt;Note&lt;/b&gt;: to access the container of a Component see &lt;code&gt;{@link #ownerCt}&lt;/code&gt;.&lt;/p&gt;
     */

<span id='Ext-AbstractComponent-cfg-itemId'>    /**
</span>     * @cfg {String} itemId
     * &lt;p&gt;An &lt;tt&gt;itemId&lt;/tt&gt; can be used as an alternative way to get a reference to a component
     * when no object reference is available.  Instead of using an &lt;code&gt;{@link #id}&lt;/code&gt; with
     * {@link Ext}.{@link Ext#getCmp getCmp}, use &lt;code&gt;itemId&lt;/code&gt; with
     * {@link Ext.container.Container}.{@link Ext.container.Container#getComponent getComponent} which will retrieve
     * &lt;code&gt;itemId&lt;/code&gt;'s or &lt;tt&gt;{@link #id}&lt;/tt&gt;'s. Since &lt;code&gt;itemId&lt;/code&gt;'s are an index to the
     * container's internal MixedCollection, the &lt;code&gt;itemId&lt;/code&gt; is scoped locally to the container --
     * avoiding potential conflicts with {@link Ext.ComponentManager} which requires a &lt;b&gt;unique&lt;/b&gt;
     * &lt;code&gt;{@link #id}&lt;/code&gt;.&lt;/p&gt;
     * &lt;pre&gt;&lt;code&gt;
var c = new Ext.panel.Panel({ //
    {@link Ext.Component#height height}: 300,
    {@link #renderTo}: document.body,
    {@link Ext.container.Container#layout layout}: 'auto',
    {@link Ext.container.Container#items items}: [
        {
            itemId: 'p1',
            {@link Ext.panel.Panel#title title}: 'Panel 1',
            {@link Ext.Component#height height}: 150
        },
        {
            itemId: 'p2',
            {@link Ext.panel.Panel#title title}: 'Panel 2',
            {@link Ext.Component#height height}: 150
        }
    ]
})
p1 = c.{@link Ext.container.Container#getComponent getComponent}('p1'); // not the same as {@link Ext#getCmp Ext.getCmp()}
p2 = p1.{@link #ownerCt}.{@link Ext.container.Container#getComponent getComponent}('p2'); // reference via a sibling
     * &lt;/code&gt;&lt;/pre&gt;
     * &lt;p&gt;Also see &lt;tt&gt;{@link #id}&lt;/tt&gt;, &lt;code&gt;{@link #query}&lt;/code&gt;, &lt;code&gt;{@link #down}&lt;/code&gt; and &lt;code&gt;{@link #child}&lt;/code&gt;.&lt;/p&gt;
     * &lt;p&gt;&lt;b&gt;Note&lt;/b&gt;: to access the container of an item see &lt;tt&gt;{@link #ownerCt}&lt;/tt&gt;.&lt;/p&gt;
     */

<span id='Ext-AbstractComponent-property-ownerCt'>    /**
</span>     * This Component's owner {@link Ext.container.Container Container} (defaults to undefined, and is set automatically when
     * this Component is added to a Container).  Read-only.
     * &lt;p&gt;&lt;b&gt;Note&lt;/b&gt;: to access items within the Container see &lt;tt&gt;{@link #itemId}&lt;/tt&gt;.&lt;/p&gt;
     * @type Ext.Container
     * @property ownerCt
     */

<span id='Ext-AbstractComponent-cfg-autoEl'>    /**
</span>     * @cfg {Mixed} autoEl
     * &lt;p&gt;A tag name or {@link Ext.core.DomHelper DomHelper} spec used to create the {@link #getEl Element} which will
     * encapsulate this Component.&lt;/p&gt;
     * &lt;p&gt;You do not normally need to specify this. For the base classes {@link Ext.Component} and {@link Ext.container.Container},
     * this defaults to &lt;b&gt;&lt;tt&gt;'div'&lt;/tt&gt;&lt;/b&gt;. The more complex Sencha classes use a more complex
     * DOM structure specified by their own {@link #renderTpl}s.&lt;/p&gt;
     * &lt;p&gt;This is intended to allow the developer to create application-specific utility Components encapsulated by
     * different DOM elements. Example usage:&lt;/p&gt;&lt;pre&gt;&lt;code&gt;
{
    xtype: 'component',
    autoEl: {
        tag: 'img',
        src: 'http://www.example.com/example.jpg'
    }
}, {
    xtype: 'component',
    autoEl: {
        tag: 'blockquote',
        html: 'autoEl is cool!'
    }
}, {
    xtype: 'container',
    autoEl: 'ul',
    cls: 'ux-unordered-list',
    items: {
        xtype: 'component',
        autoEl: 'li',
        html: 'First list item'
    }
}
&lt;/code&gt;&lt;/pre&gt;
     */

<span id='Ext-AbstractComponent-cfg-renderTpl'>    /**
</span>     * @cfg {Mixed} renderTpl
     * &lt;p&gt;An {@link Ext.XTemplate XTemplate} used to create the internal structure inside this Component's
     * encapsulating {@link #getEl Element}.&lt;/p&gt;
     * &lt;p&gt;You do not normally need to specify this. For the base classes {@link Ext.Component}
     * and {@link Ext.container.Container}, this defaults to &lt;b&gt;&lt;code&gt;null&lt;/code&gt;&lt;/b&gt; which means that they will be initially rendered
     * with no internal structure; they render their {@link #getEl Element} empty. The more specialized ExtJS and Touch classes
     * which use a more complex DOM structure, provide their own template definitions.&lt;/p&gt;
     * &lt;p&gt;This is intended to allow the developer to create application-specific utility Components with customized
     * internal structure.&lt;/p&gt;
     * &lt;p&gt;Upon rendering, any created child elements may be automatically imported into object properties using the
     * {@link #renderSelectors} option.&lt;/p&gt;
     */
    renderTpl: null,

<span id='Ext-AbstractComponent-cfg-renderSelectors'>    /**
</span>     * @cfg {Object} renderSelectors

An object containing properties specifying {@link Ext.DomQuery DomQuery} selectors which identify child elements
created by the render process.

After the Component's internal structure is rendered according to the {@link #renderTpl}, this object is iterated through,
and the found Elements are added as properties to the Component using the `renderSelector` property name.

For example, a Component which rendered an image, and description into its element might use the following properties
coded into its prototype:

    renderTpl: '&amp;lt;img src=&quot;{imageUrl}&quot; class=&quot;x-image-component-img&quot;&gt;&amp;lt;div class=&quot;x-image-component-desc&quot;&gt;{description}&amp;gt;/div&amp;lt;',

    renderSelectors: {
        image: 'img.x-image-component-img',
        descEl: 'div.x-image-component-desc'
    }

After rendering, the Component would have a property &lt;code&gt;image&lt;/code&gt; referencing its child `img` Element,
and a property `descEl` referencing the `div` Element which contains the description.

     * @markdown
     */

<span id='Ext-AbstractComponent-cfg-renderTo'>    /**
</span>     * @cfg {Mixed} renderTo
     * &lt;p&gt;Specify the id of the element, a DOM element or an existing Element that this component
     * will be rendered into.&lt;/p&gt;&lt;div&gt;&lt;ul&gt;
     * &lt;li&gt;&lt;b&gt;Notes&lt;/b&gt; : &lt;ul&gt;
     * &lt;div class=&quot;sub-desc&quot;&gt;Do &lt;u&gt;not&lt;/u&gt; use this option if the Component is to be a child item of
     * a {@link Ext.container.Container Container}. It is the responsibility of the
     * {@link Ext.container.Container Container}'s {@link Ext.container.Container#layout layout manager}
     * to render and manage its child items.&lt;/div&gt;
     * &lt;div class=&quot;sub-desc&quot;&gt;When using this config, a call to render() is not required.&lt;/div&gt;
     * &lt;/ul&gt;&lt;/li&gt;
     * &lt;/ul&gt;&lt;/div&gt;
     * &lt;p&gt;See &lt;code&gt;{@link #render}&lt;/code&gt; also.&lt;/p&gt;
     */

<span id='Ext-AbstractComponent-cfg-frame'>    /**
</span>     * @cfg {Boolean} frame
     * &lt;p&gt;Specify as &lt;code&gt;true&lt;/code&gt; to have the Component inject framing elements within the Component at render time to
     * provide a graphical rounded frame around the Component content.&lt;/p&gt;
     * &lt;p&gt;This is only necessary when running on outdated, or non standard-compliant browsers such as Microsoft's Internet Explorer
     * prior to version 9 which do not support rounded corners natively.&lt;/p&gt;
     * &lt;p&gt;The extra space taken up by this framing is available from the read only property {@link #frameSize}.&lt;/p&gt;
     */

<span id='Ext-AbstractComponent-property-frameSize'>    /**
</span>     * &lt;p&gt;Read-only property indicating the width of any framing elements which were added within the encapsulating element
     * to provide graphical, rounded borders. See the {@link #frame} config.&lt;/p&gt;
     * &lt;p&gt; This is an object containing the frame width in pixels for all four sides of the Component containing
     * the following properties:&lt;/p&gt;&lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
     * &lt;li&gt;&lt;code&gt;top&lt;/code&gt; The width of the top framing element in pixels.&lt;/li&gt;
     * &lt;li&gt;&lt;code&gt;right&lt;/code&gt; The width of the right framing element in pixels.&lt;/li&gt;
     * &lt;li&gt;&lt;code&gt;bottom&lt;/code&gt; The width of the bottom framing element in pixels.&lt;/li&gt;
     * &lt;li&gt;&lt;code&gt;left&lt;/code&gt; The width of the left framing element in pixels.&lt;/li&gt;
     * &lt;/ul&gt;&lt;/div&gt;
     * @property frameSize
     * @type {Object}
     */

<span id='Ext-AbstractComponent-cfg-componentLayout'>    /**
</span>     * @cfg {String/Object} componentLayout
     * &lt;p&gt;The sizing and positioning of a Component's internal Elements is the responsibility of
     * the Component's layout manager which sizes a Component's internal structure in response to the Component being sized.&lt;/p&gt;
     * &lt;p&gt;Generally, developers will not use this configuration as all provided Components which need their internal
     * elements sizing (Such as {@link Ext.form.field.Base input fields}) come with their own componentLayout managers.&lt;/p&gt;
     * &lt;p&gt;The {@link Ext.layout.container.Auto default layout manager} will be used on instances of the base Ext.Component class
     * which simply sizes the Component's encapsulating element to the height and width specified in the {@link #setSize} method.&lt;/p&gt;
     */

<span id='Ext-AbstractComponent-cfg-tpl'>    /**
</span>     * @cfg {Mixed} tpl
     * An &lt;bold&gt;{@link Ext.Template}&lt;/bold&gt;, &lt;bold&gt;{@link Ext.XTemplate}&lt;/bold&gt;
     * or an array of strings to form an Ext.XTemplate.
     * Used in conjunction with the &lt;code&gt;{@link #data}&lt;/code&gt; and
     * &lt;code&gt;{@link #tplWriteMode}&lt;/code&gt; configurations.
     */

<span id='Ext-AbstractComponent-cfg-data'>    /**
</span>     * @cfg {Mixed} data
     * The initial set of data to apply to the &lt;code&gt;{@link #tpl}&lt;/code&gt; to
     * update the content area of the Component.
     */

<span id='Ext-AbstractComponent-cfg-tplWriteMode'>    /**
</span>     * @cfg {String} tplWriteMode The Ext.(X)Template method to use when
     * updating the content area of the Component. Defaults to &lt;code&gt;'overwrite'&lt;/code&gt;
     * (see &lt;code&gt;{@link Ext.XTemplate#overwrite}&lt;/code&gt;).
     */
    tplWriteMode: 'overwrite',

<span id='Ext-AbstractComponent-cfg-baseCls'>    /**
</span>     * @cfg {String} baseCls
     * The base CSS class to apply to this components's element. This will also be prepended to
     * elements within this component like Panel's body will get a class x-panel-body. This means
     * that if you create a subclass of Panel, and you want it to get all the Panels styling for the
     * element and the body, you leave the baseCls x-panel and use componentCls to add specific styling for this
     * component.
     */
    baseCls: Ext.baseCSSPrefix + 'component',

<span id='Ext-AbstractComponent-cfg-componentCls'>    /**
</span>     * @cfg {String} componentCls
     * CSS Class to be added to a components root level element to give distinction to it
     * via styling.
     */

<span id='Ext-AbstractComponent-cfg-cls'>    /**
</span>     * @cfg {String} cls
     * An optional extra CSS class that will be added to this component's Element (defaults to '').  This can be
     * useful for adding customized styles to the component or any of its children using standard CSS rules.
     */

<span id='Ext-AbstractComponent-cfg-overCls'>    /**
</span>     * @cfg {String} overCls
     * An optional extra CSS class that will be added to this component's Element when the mouse moves
     * over the Element, and removed when the mouse moves out. (defaults to '').  This can be
     * useful for adding customized 'active' or 'hover' styles to the component or any of its children using standard CSS rules.
     */

<span id='Ext-AbstractComponent-cfg-disabledCls'>    /**
</span>     * @cfg {String} disabledCls
     * CSS class to add when the Component is disabled. Defaults to 'x-item-disabled'.
     */
    disabledCls: Ext.baseCSSPrefix + 'item-disabled',

<span id='Ext-AbstractComponent-cfg-ui'>    /**
</span>     * @cfg {String/Array} ui
     * A set style for a component. Can be a string or an Array of multiple strings (UIs)
     */
    ui: 'default',
    
<span id='Ext-AbstractComponent-cfg-uiCls'>    /**
</span>     * @cfg {Array} uiCls
     * An array of of classNames which are currently applied to this component
     * @private
     */
    uiCls: [],
    
<span id='Ext-AbstractComponent-cfg-style'>    /**
</span>     * @cfg {String} style
     * A custom style specification to be applied to this component's Element.  Should be a valid argument to
     * {@link Ext.core.Element#applyStyles}.
     * &lt;pre&gt;&lt;code&gt;
        new Ext.panel.Panel({
            title: 'Some Title',
            renderTo: Ext.getBody(),
            width: 400, height: 300,
            layout: 'form',
            items: [{
                xtype: 'textarea',
                style: {
                    width: '95%',
                    marginBottom: '10px'
                }
            },
            new Ext.button.Button({
                text: 'Send',
                minWidth: '100',
                style: {
                    marginBottom: '10px'
                }
            })
            ]
        });
     &lt;/code&gt;&lt;/pre&gt;
     */

<span id='Ext-AbstractComponent-cfg-width'>    /**
</span>     * @cfg {Number} width
     * The width of this component in pixels.
     */

<span id='Ext-AbstractComponent-cfg-height'>    /**
</span>     * @cfg {Number} height
     * The height of this component in pixels.
     */

<span id='Ext-AbstractComponent-cfg-border'>    /**
</span>     * @cfg {Number/String} border
     * Specifies the border for this component. The border can be a single numeric value to apply to all sides or
     * it can be a CSS style specification for each style, for example: '10 5 3 10'.
     */

<span id='Ext-AbstractComponent-cfg-padding'>    /**
</span>     * @cfg {Number/String} padding
     * Specifies the padding for this component. The padding can be a single numeric value to apply to all sides or
     * it can be a CSS style specification for each style, for example: '10 5 3 10'.
     */

<span id='Ext-AbstractComponent-cfg-margin'>    /**
</span>     * @cfg {Number/String} margin
     * Specifies the margin for this component. The margin can be a single numeric value to apply to all sides or
     * it can be a CSS style specification for each style, for example: '10 5 3 10'.
     */

<span id='Ext-AbstractComponent-cfg-hidden'>    /**
</span>     * @cfg {Boolean} hidden
     * Defaults to false.
     */
    hidden: false,

<span id='Ext-AbstractComponent-cfg-disabled'>    /**
</span>     * @cfg {Boolean} disabled
     * Defaults to false.
     */
    disabled: false,

<span id='Ext-AbstractComponent-cfg-draggable'>    /**
</span>     * @cfg {Boolean} draggable
     * Allows the component to be dragged.
     */

<span id='Ext-AbstractComponent-property-draggable'>    /**
</span>     * Read-only property indicating whether or not the component can be dragged
     * @property draggable
     * @type {Boolean}
     */
    draggable: false,

<span id='Ext-AbstractComponent-cfg-floating'>    /**
</span>     * @cfg {Boolean} floating
     * Create the Component as a floating and use absolute positioning.
     * Defaults to false.
     */
    floating: false,

<span id='Ext-AbstractComponent-cfg-hideMode'>    /**
</span>     * @cfg {String} hideMode
     * A String which specifies how this Component's encapsulating DOM element will be hidden.
     * Values may be&lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
     * &lt;li&gt;&lt;code&gt;'display'&lt;/code&gt; : The Component will be hidden using the &lt;code&gt;display: none&lt;/code&gt; style.&lt;/li&gt;
     * &lt;li&gt;&lt;code&gt;'visibility'&lt;/code&gt; : The Component will be hidden using the &lt;code&gt;visibility: hidden&lt;/code&gt; style.&lt;/li&gt;
     * &lt;li&gt;&lt;code&gt;'offsets'&lt;/code&gt; : The Component will be hidden by absolutely positioning it out of the visible area of the document. This
     * is useful when a hidden Component must maintain measurable dimensions. Hiding using &lt;code&gt;display&lt;/code&gt; results
     * in a Component having zero dimensions.&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;
     * Defaults to &lt;code&gt;'display'&lt;/code&gt;.
     */
    hideMode: 'display',

<span id='Ext-AbstractComponent-cfg-contentEl'>    /**
</span>     * @cfg {String} contentEl
     * &lt;p&gt;Optional. Specify an existing HTML element, or the &lt;code&gt;id&lt;/code&gt; of an existing HTML element to use as the content
     * for this component.&lt;/p&gt;
     * &lt;ul&gt;
     * &lt;li&gt;&lt;b&gt;Description&lt;/b&gt; :
     * &lt;div class=&quot;sub-desc&quot;&gt;This config option is used to take an existing HTML element and place it in the layout element
     * of a new component (it simply moves the specified DOM element &lt;i&gt;after the Component is rendered&lt;/i&gt; to use as the content.&lt;/div&gt;&lt;/li&gt;
     * &lt;li&gt;&lt;b&gt;Notes&lt;/b&gt; :
     * &lt;div class=&quot;sub-desc&quot;&gt;The specified HTML element is appended to the layout element of the component &lt;i&gt;after any configured
     * {@link #html HTML} has been inserted&lt;/i&gt;, and so the document will not contain this element at the time the {@link #render} event is fired.&lt;/div&gt;
     * &lt;div class=&quot;sub-desc&quot;&gt;The specified HTML element used will not participate in any &lt;code&gt;&lt;b&gt;{@link Ext.container.Container#layout layout}&lt;/b&gt;&lt;/code&gt;
     * scheme that the Component may use. It is just HTML. Layouts operate on child &lt;code&gt;&lt;b&gt;{@link Ext.container.Container#items items}&lt;/b&gt;&lt;/code&gt;.&lt;/div&gt;
     * &lt;div class=&quot;sub-desc&quot;&gt;Add either the &lt;code&gt;x-hidden&lt;/code&gt; or the &lt;code&gt;x-hide-display&lt;/code&gt; CSS class to
     * prevent a brief flicker of the content before it is rendered to the panel.&lt;/div&gt;&lt;/li&gt;
     * &lt;/ul&gt;
     */

<span id='Ext-AbstractComponent-cfg-html'>    /**
</span>     * @cfg {String/Object} html
     * An HTML fragment, or a {@link Ext.core.DomHelper DomHelper} specification to use as the layout element
     * content (defaults to ''). The HTML content is added after the component is rendered,
     * so the document will not contain this HTML at the time the {@link #render} event is fired.
     * This content is inserted into the body &lt;i&gt;before&lt;/i&gt; any configured {@link #contentEl} is appended.
     */

<span id='Ext-AbstractComponent-cfg-styleHtmlContent'>    /**
</span>     * @cfg {String} styleHtmlContent
     * True to automatically style the html inside the content target of this component (body for panels).
     * Defaults to false.
     */
    styleHtmlContent: false,

<span id='Ext-AbstractComponent-cfg-styleHtmlCls'>    /**
</span>     * @cfg {String} styleHtmlCls
     * The class that is added to the content target when you set styleHtmlContent to true.
     * Defaults to 'x-html'
     */
    styleHtmlCls: Ext.baseCSSPrefix + 'html',

<span id='Ext-AbstractComponent-cfg-minHeight'>    /**
</span>     * @cfg {Number} minHeight
     * &lt;p&gt;The minimum value in pixels which this Component will set its height to.&lt;/p&gt;
     * &lt;p&gt;&lt;b&gt;Warning:&lt;/b&gt; This will override any size management applied by layout managers.&lt;/p&gt;
     */
<span id='Ext-AbstractComponent-cfg-minWidth'>    /**
</span>     * @cfg {Number} minWidth
     * &lt;p&gt;The minimum value in pixels which this Component will set its width to.&lt;/p&gt;
     * &lt;p&gt;&lt;b&gt;Warning:&lt;/b&gt; This will override any size management applied by layout managers.&lt;/p&gt;
     */
<span id='Ext-AbstractComponent-cfg-maxHeight'>    /**
</span>     * @cfg {Number} maxHeight
     * &lt;p&gt;The maximum value in pixels which this Component will set its height to.&lt;/p&gt;
     * &lt;p&gt;&lt;b&gt;Warning:&lt;/b&gt; This will override any size management applied by layout managers.&lt;/p&gt;
     */
<span id='Ext-AbstractComponent-cfg-maxWidth'>    /**
</span>     * @cfg {Number} maxWidth
     * &lt;p&gt;The maximum value in pixels which this Component will set its width to.&lt;/p&gt;
     * &lt;p&gt;&lt;b&gt;Warning:&lt;/b&gt; This will override any size management applied by layout managers.&lt;/p&gt;
     */

<span id='Ext-AbstractComponent-cfg-loader'>    /**
</span>     * @cfg {Ext.ComponentLoader/Object} loader
     * A configuration object or an instance of a {@link Ext.ComponentLoader} to load remote
     * content for this Component.
     */

     // @private
     allowDomMove: true,

<span id='Ext-AbstractComponent-cfg-autoShow'>     /**
</span>      * @cfg {Boolean} autoShow True to automatically show the component upon creation.
      * This config option may only be used for {@link #floating} components or components
      * that use {@link #autoRender}. Defaults to &lt;tt&gt;false&lt;/tt&gt;.
      */
     autoShow: false,

<span id='Ext-AbstractComponent-cfg-autoRender'>    /**
</span>     * @cfg {Mixed} autoRender
     * &lt;p&gt;This config is intended mainly for {@link #floating} Components which may or may not be shown. Instead
     * of using {@link #renderTo} in the configuration, and rendering upon construction, this allows a Component
     * to render itself upon first &lt;i&gt;{@link #show}&lt;/i&gt;.&lt;/p&gt;
     * &lt;p&gt;Specify as &lt;code&gt;true&lt;/code&gt; to have this Component render to the document body upon first show.&lt;/p&gt;
     * &lt;p&gt;Specify as an element, or the ID of an element to have this Component render to a specific element upon first show.&lt;/p&gt;
     * &lt;p&gt;&lt;b&gt;This defaults to &lt;code&gt;true&lt;/code&gt; for the {@link Ext.window.Window Window} class.&lt;/b&gt;&lt;/p&gt;
     */
     autoRender: false,

     needsLayout: false,

<span id='Ext-AbstractComponent-cfg-plugins'>    /**
</span>     * @cfg {Object/Array} plugins
     * An object or array of objects that will provide custom functionality for this component.  The only
     * requirement for a valid plugin is that it contain an init method that accepts a reference of type Ext.Component.
     * When a component is created, if any plugins are available, the component will call the init method on each
     * plugin, passing a reference to itself.  Each plugin can then call methods or respond to events on the
     * component as needed to provide its functionality.
     */

<span id='Ext-AbstractComponent-property-rendered'>    /**
</span>     * Read-only property indicating whether or not the component has been rendered.
     * @property rendered
     * @type {Boolean}
     */
    rendered: false,

    weight: 0,

    trimRe: /^\s+|\s+$/g,
    spacesRe: /\s+/,
    
    
<span id='Ext-AbstractComponent-property-maskOnDisable'>    /**
</span>     * This is an internal flag that you use when creating custom components.
     * By default this is set to true which means that every component gets a mask when its disabled.
     * Components like FieldContainer, FieldSet, Field, Button, Tab override this property to false
     * since they want to implement custom disable logic.
     * @property maskOnDisable
     * @type {Boolean}
     */     
    maskOnDisable: true,

    constructor : function(config) {
        var me = this,
            i, len;

        config = config || {};
        me.initialConfig = config;
        Ext.apply(me, config);

        me.addEvents(
<span id='Ext-AbstractComponent-event-beforeactivate'>            /**
</span>             * @event beforeactivate
             * Fires before a Component has been visually activated.
             * Returning false from an event listener can prevent the activate
             * from occurring.
             * @param {Ext.Component} this
             */
             'beforeactivate',
<span id='Ext-AbstractComponent-event-activate'>            /**
</span>             * @event activate
             * Fires after a Component has been visually activated.
             * @param {Ext.Component} this
             */
             'activate',
<span id='Ext-AbstractComponent-event-beforedeactivate'>            /**
</span>             * @event beforedeactivate
             * Fires before a Component has been visually deactivated.
             * Returning false from an event listener can prevent the deactivate
             * from occurring.
             * @param {Ext.Component} this
             */
             'beforedeactivate',
<span id='Ext-AbstractComponent-event-deactivate'>            /**
</span>             * @event deactivate
             * Fires after a Component has been visually deactivated.
             * @param {Ext.Component} this
             */
             'deactivate',
<span id='Ext-AbstractComponent-event-added'>            /**
</span>             * @event added
             * Fires after a Component had been added to a Container.
             * @param {Ext.Component} this
             * @param {Ext.container.Container} container Parent Container
             * @param {Number} pos position of Component
             */
             'added',
<span id='Ext-AbstractComponent-event-disable'>            /**
</span>             * @event disable
             * Fires after the component is disabled.
             * @param {Ext.Component} this
             */
             'disable',
<span id='Ext-AbstractComponent-event-enable'>            /**
</span>             * @event enable
             * Fires after the component is enabled.
             * @param {Ext.Component} this
             */
             'enable',
<span id='Ext-AbstractComponent-event-beforeshow'>            /**
</span>             * @event beforeshow
             * Fires before the component is shown when calling the {@link #show} method.
             * Return false from an event handler to stop the show.
             * @param {Ext.Component} this
             */
             'beforeshow',
<span id='Ext-AbstractComponent-event-show'>            /**
</span>             * @event show
             * Fires after the component is shown when calling the {@link #show} method.
             * @param {Ext.Component} this
             */
             'show',
<span id='Ext-AbstractComponent-event-beforehide'>            /**
</span>             * @event beforehide
             * Fires before the component is hidden when calling the {@link #hide} method.
             * Return false from an event handler to stop the hide.
             * @param {Ext.Component} this
             */
             'beforehide',
<span id='Ext-AbstractComponent-event-hide'>            /**
</span>             * @event hide
             * Fires after the component is hidden.
             * Fires after the component is hidden when calling the {@link #hide} method.
             * @param {Ext.Component} this
             */
             'hide',
<span id='Ext-AbstractComponent-event-removed'>            /**
</span>             * @event removed
             * Fires when a component is removed from an Ext.container.Container
             * @param {Ext.Component} this
             * @param {Ext.container.Container} ownerCt Container which holds the component
             */
             'removed',
<span id='Ext-AbstractComponent-event-beforerender'>            /**
</span>             * @event beforerender
             * Fires before the component is {@link #rendered}. Return false from an
             * event handler to stop the {@link #render}.
             * @param {Ext.Component} this
             */
             'beforerender',
<span id='Ext-AbstractComponent-event-render'>            /**
</span>             * @event render
             * Fires after the component markup is {@link #rendered}.
             * @param {Ext.Component} this
             */
             'render',
<span id='Ext-AbstractComponent-event-afterrender'>            /**
</span>             * @event afterrender
             * &lt;p&gt;Fires after the component rendering is finished.&lt;/p&gt;
             * &lt;p&gt;The afterrender event is fired after this Component has been {@link #rendered}, been postprocesed
             * by any afterRender method defined for the Component.&lt;/p&gt;
             * @param {Ext.Component} this
             */
             'afterrender',
<span id='Ext-AbstractComponent-event-beforedestroy'>            /**
</span>             * @event beforedestroy
             * Fires before the component is {@link #destroy}ed. Return false from an event handler to stop the {@link #destroy}.
             * @param {Ext.Component} this
             */
             'beforedestroy',
<span id='Ext-AbstractComponent-event-destroy'>            /**
</span>             * @event destroy
             * Fires after the component is {@link #destroy}ed.
             * @param {Ext.Component} this
             */
             'destroy',
<span id='Ext-AbstractComponent-event-resize'>            /**
</span>             * @event resize
             * Fires after the component is resized.
             * @param {Ext.Component} this
             * @param {Number} adjWidth The box-adjusted width that was set
             * @param {Number} adjHeight The box-adjusted height that was set
             */
             'resize',
<span id='Ext-AbstractComponent-event-move'>            /**
</span>             * @event move
             * Fires after the component is moved.
             * @param {Ext.Component} this
             * @param {Number} x The new x position
             * @param {Number} y The new y position
             */
             'move'
        );

        me.getId();

        me.mons = [];
        me.additionalCls = [];
        me.renderData = me.renderData || {};
        me.renderSelectors = me.renderSelectors || {};

        if (me.plugins) {
            me.plugins = [].concat(me.plugins);
            for (i = 0, len = me.plugins.length; i &lt; len; i++) {
                me.plugins[i] = me.constructPlugin(me.plugins[i]);
            }
        }
        
        me.initComponent();

        // ititComponent gets a chance to change the id property before registering
        Ext.ComponentManager.register(me);

        // Dont pass the config so that it is not applied to 'this' again
        me.mixins.observable.constructor.call(me);
        me.mixins.state.constructor.call(me, config);

        // Move this into Observable?
        if (me.plugins) {
            me.plugins = [].concat(me.plugins);
            for (i = 0, len = me.plugins.length; i &lt; len; i++) {
                me.plugins[i] = me.initPlugin(me.plugins[i]);
            }
        }

        me.loader = me.getLoader();

        if (me.renderTo) {
            me.render(me.renderTo);
        }

        if (me.autoShow) {
            me.show();
        }
        
        //&lt;debug&gt;
        if (Ext.isDefined(me.disabledClass)) {
            if (Ext.isDefined(Ext.global.console)) {
                Ext.global.console.warn('Ext.Component: disabledClass has been deprecated. Please use disabledCls.');
            }
            me.disabledCls = me.disabledClass;
            delete me.disabledClass;
        }
        //&lt;/debug&gt;
    },

    initComponent: Ext.emptyFn,

    show: Ext.emptyFn,

    animate: function(animObj) {
        var me = this,
            to;

        animObj = animObj || {};
        to = animObj.to || {};

        if (Ext.fx.Manager.hasFxBlock(me.id)) {
            return me;
        }
        // Special processing for animating Component dimensions.
        if (!animObj.dynamic &amp;&amp; (to.height || to.width)) {
            var curWidth = me.getWidth(),
                w = curWidth,
                curHeight = me.getHeight(),
                h = curHeight,
                needsResize = false;

            if (to.height &amp;&amp; to.height &gt; curHeight) {
                h = to.height;
                needsResize = true;
            }
            if (to.width &amp;&amp; to.width &gt; curWidth) {
                w = to.width;
                needsResize = true;
            }

            // If any dimensions are being increased, we must resize the internal structure
            // of the Component, but then clip it by sizing its encapsulating element back to original dimensions.
            // The animation will then progressively reveal the larger content.
            if (needsResize) {
                var clearWidth = !Ext.isNumber(me.width),
                    clearHeight = !Ext.isNumber(me.height);

                me.componentLayout.childrenChanged = true;
                me.setSize(w, h, me.ownerCt);
                me.el.setSize(curWidth, curHeight);
                if (clearWidth) {
                    delete me.width;
                }
                if (clearHeight) {
                    delete me.height;
                }
            }
        }
        return me.mixins.animate.animate.apply(me, arguments);
    },

<span id='Ext-AbstractComponent-method-findLayoutController'>    /**
</span>     * &lt;p&gt;This method finds the topmost active layout who's processing will eventually determine the size and position of this
     * Component.&lt;p&gt;
     * &lt;p&gt;This method is useful when dynamically adding Components into Containers, and some processing must take place after the
     * final sizing and positioning of the Component has been performed.&lt;/p&gt;
     * @returns
     */
    findLayoutController: function() {
        return this.findParentBy(function(c) {
            // Return true if we are at the root of the Container tree
            // or this Container's layout is busy but the next one up is not.
            return !c.ownerCt || (c.layout.layoutBusy &amp;&amp; !c.ownerCt.layout.layoutBusy);
        });
    },

    onShow : function() {
        // Layout if needed
        var needsLayout = this.needsLayout;
        if (Ext.isObject(needsLayout)) {
            this.doComponentLayout(needsLayout.width, needsLayout.height, needsLayout.isSetSize, needsLayout.ownerCt);
        }
    },

    constructPlugin: function(plugin) {
        if (plugin.ptype &amp;&amp; typeof plugin.init != 'function') {
            plugin.cmp = this;
            plugin = Ext.PluginManager.create(plugin);
        }
        else if (typeof plugin == 'string') {
            plugin = Ext.PluginManager.create({
                ptype: plugin,
                cmp: this
            });
        }
        return plugin;
    },


    // @private
    initPlugin : function(plugin) {
        plugin.init(this);

        return plugin;
    },

<span id='Ext-AbstractComponent-method-doAutoRender'>    /**
</span>     * Handles autoRender.
     * Floating Components may have an ownerCt. If they are asking to be constrained, constrain them within that
     * ownerCt, and have their z-index managed locally. Floating Components are always rendered to document.body
     */
    doAutoRender: function() {
        var me = this;
        if (me.floating) {
            me.render(document.body);
        } else {
            me.render(Ext.isBoolean(me.autoRender) ? Ext.getBody() : me.autoRender);
        }
    },

    // @private
    render : function(container, position) {
        var me = this;

        if (!me.rendered &amp;&amp; me.fireEvent('beforerender', me) !== false) {
            // If this.el is defined, we want to make sure we are dealing with
            // an Ext Element.
            if (me.el) {
                me.el = Ext.get(me.el);
            }

            // Perform render-time processing for floating Components
            if (me.floating) {
                me.onFloatRender();
            }

            container = me.initContainer(container);

            me.onRender(container, position);

            // Tell the encapsulating element to hide itself in the way the Component is configured to hide
            // This means DISPLAY, VISIBILITY or OFFSETS.
            me.el.setVisibilityMode(Ext.core.Element[me.hideMode.toUpperCase()]);

            if (me.overCls) {
                me.el.hover(me.addOverCls, me.removeOverCls, me);
            }

            me.fireEvent('render', me);

            me.initContent();

            me.afterRender(container);
            me.fireEvent('afterrender', me);

            me.initEvents();

            if (me.hidden) {
                // Hiding during the render process should not perform any ancillary
                // actions that the full hide process does; It is not hiding, it begins in a hidden state.'
                // So just make the element hidden according to the configured hideMode
                me.el.hide();
            }

            if (me.disabled) {
                // pass silent so the event doesn't fire the first time.
                me.disable(true);
            }
        }
        return me;
    },

    // @private
    onRender : function(container, position) {
        var me = this,
            el = me.el,
            cls = me.initCls(),
            styles = me.initStyles(),
            renderTpl, renderData, i;

        position = me.getInsertPosition(position);

        if (!el) {
            if (position) {
                el = Ext.core.DomHelper.insertBefore(position, me.getElConfig(), true);
            }
            else {
                el = Ext.core.DomHelper.append(container, me.getElConfig(), true);
            }
        }
        else if (me.allowDomMove !== false) {
            if (position) {
                container.dom.insertBefore(el.dom, position);
            } else {
                container.dom.appendChild(el.dom);
            }
        }

        if (Ext.scopeResetCSS &amp;&amp; !me.ownerCt) {
            // If this component's el is the body element, we add the reset class to the html tag
            if (el.dom == Ext.getBody().dom) {
                el.parent().addCls(Ext.baseCSSPrefix + 'reset');
            }
            else {
                // Else we wrap this element in an element that adds the reset class.
                me.resetEl = el.wrap({
                    cls: Ext.baseCSSPrefix + 'reset'
                });
            }
        }

        el.addCls(cls);
        el.setStyle(styles);

        // Here we check if the component has a height set through style or css.
        // If it does then we set the this.height to that value and it won't be
        // considered an auto height component
        // if (this.height === undefined) {
        //     var height = el.getHeight();
        //     // This hopefully means that the panel has an explicit height set in style or css
        //     if (height - el.getPadding('tb') - el.getBorderWidth('tb') &gt; 0) {
        //         this.height = height;
        //     }
        // }

        me.el = el;
        
        me.rendered = true;
        me.addUIToElement(true);
        //loop through all exisiting uiCls and update the ui in them
        for (i = 0; i &lt; me.uiCls.length; i++) {
            me.addUIClsToElement(me.uiCls[i], true);
        }
        me.rendered = false;
        me.initFrame();

        renderTpl = me.initRenderTpl();
        if (renderTpl) {
            renderData = me.initRenderData();
            renderTpl.append(me.getTargetEl(), renderData);
        }

        me.applyRenderSelectors();
        
        me.rendered = true;
        
        me.setUI(me.ui);
    },

    // @private
    afterRender : function() {
        var me = this,
            pos,
            xy;

        me.getComponentLayout();

        // Set the size if a size is configured, or if this is the outermost Container
        if (!me.ownerCt || (me.height || me.width)) {
            me.setSize(me.width, me.height);
        }

        // For floaters, calculate x and y if they aren't defined by aligning
        // the sized element to the center of either the the container or the ownerCt
        if (me.floating &amp;&amp; (me.x === undefined || me.y === undefined)) {
            if (me.floatParent) {
                xy = me.el.getAlignToXY(me.floatParent.getTargetEl(), 'c-c');
                pos = me.floatParent.getTargetEl().translatePoints(xy[0], xy[1]);
            } else {
                xy = me.el.getAlignToXY(me.container, 'c-c');
                pos = me.container.translatePoints(xy[0], xy[1]);
            }
            me.x = me.x === undefined ? pos.left: me.x;
            me.y = me.y === undefined ? pos.top: me.y;
        }

        if (Ext.isDefined(me.x) || Ext.isDefined(me.y)) {
            me.setPosition(me.x, me.y);
        }

        if (me.styleHtmlContent) {
            me.getTargetEl().addCls(me.styleHtmlCls);
        }
    },

    frameCls: Ext.baseCSSPrefix + 'frame',

    frameTpl: [
        '&lt;tpl if=&quot;top&quot;&gt;',
            '&lt;tpl if=&quot;left&quot;&gt;&lt;div class=&quot;{frameCls}-tl {baseCls}-tl {baseCls}-{ui}-tl&lt;tpl if=&quot;uiCls&quot;&gt;&lt;tpl for=&quot;uiCls&quot;&gt; {parent.baseCls}-{parent.ui}-{.}-tl&lt;/tpl&gt;&lt;/tpl&gt;&quot; style=&quot;background-position: {tl}; padding-left: {frameWidth}px&quot; role=&quot;presentation&quot;&gt;&lt;/tpl&gt;',
                '&lt;tpl if=&quot;right&quot;&gt;&lt;div class=&quot;{frameCls}-tr {baseCls}-tr {baseCls}-{ui}-tr&lt;tpl if=&quot;uiCls&quot;&gt;&lt;tpl for=&quot;uiCls&quot;&gt; {parent.baseCls}-{parent.ui}-{.}-tr&lt;/tpl&gt;&lt;/tpl&gt;&quot; style=&quot;background-position: {tr}; padding-right: {frameWidth}px&quot; role=&quot;presentation&quot;&gt;&lt;/tpl&gt;',
                    '&lt;div class=&quot;{frameCls}-tc {baseCls}-tc {baseCls}-{ui}-tc&lt;tpl if=&quot;uiCls&quot;&gt;&lt;tpl for=&quot;uiCls&quot;&gt; {parent.baseCls}-{parent.ui}-{.}-tc&lt;/tpl&gt;&lt;/tpl&gt;&quot; style=&quot;background-position: {tc}; height: {frameWidth}px&quot; role=&quot;presentation&quot;&gt;&lt;/div&gt;',
                '&lt;tpl if=&quot;right&quot;&gt;&lt;/div&gt;&lt;/tpl&gt;',
            '&lt;tpl if=&quot;left&quot;&gt;&lt;/div&gt;&lt;/tpl&gt;',
        '&lt;/tpl&gt;',
        '&lt;tpl if=&quot;left&quot;&gt;&lt;div class=&quot;{frameCls}-ml {baseCls}-ml {baseCls}-{ui}-ml&lt;tpl if=&quot;uiCls&quot;&gt;&lt;tpl for=&quot;uiCls&quot;&gt; {parent.baseCls}-{parent.ui}-{.}-ml&lt;/tpl&gt;&lt;/tpl&gt;&quot; style=&quot;background-position: {ml}; padding-left: {frameWidth}px&quot; role=&quot;presentation&quot;&gt;&lt;/tpl&gt;',
            '&lt;tpl if=&quot;right&quot;&gt;&lt;div class=&quot;{frameCls}-mr {baseCls}-mr {baseCls}-{ui}-mr&lt;tpl if=&quot;uiCls&quot;&gt;&lt;tpl for=&quot;uiCls&quot;&gt; {parent.baseCls}-{parent.ui}-{.}-mr&lt;/tpl&gt;&lt;/tpl&gt;&quot; style=&quot;background-position: {mr}; padding-right: {frameWidth}px&quot; role=&quot;presentation&quot;&gt;&lt;/tpl&gt;',
                '&lt;div class=&quot;{frameCls}-mc {baseCls}-mc {baseCls}-{ui}-mc&lt;tpl if=&quot;uiCls&quot;&gt;&lt;tpl for=&quot;uiCls&quot;&gt; {parent.baseCls}-{parent.ui}-{.}-mc&lt;/tpl&gt;&lt;/tpl&gt;&quot; role=&quot;presentation&quot;&gt;&lt;/div&gt;',
            '&lt;tpl if=&quot;right&quot;&gt;&lt;/div&gt;&lt;/tpl&gt;',
        '&lt;tpl if=&quot;left&quot;&gt;&lt;/div&gt;&lt;/tpl&gt;',
        '&lt;tpl if=&quot;bottom&quot;&gt;',
            '&lt;tpl if=&quot;left&quot;&gt;&lt;div class=&quot;{frameCls}-bl {baseCls}-bl {baseCls}-{ui}-bl&lt;tpl if=&quot;uiCls&quot;&gt;&lt;tpl for=&quot;uiCls&quot;&gt; {parent.baseCls}-{parent.ui}-{.}-bl&lt;/tpl&gt;&lt;/tpl&gt;&quot; style=&quot;background-position: {bl}; padding-left: {frameWidth}px&quot; role=&quot;presentation&quot;&gt;&lt;/tpl&gt;',
                '&lt;tpl if=&quot;right&quot;&gt;&lt;div class=&quot;{frameCls}-br {baseCls}-br {baseCls}-{ui}-br&lt;tpl if=&quot;uiCls&quot;&gt;&lt;tpl for=&quot;uiCls&quot;&gt; {parent.baseCls}-{parent.ui}-{.}-br&lt;/tpl&gt;&lt;/tpl&gt;&quot; style=&quot;background-position: {br}; padding-right: {frameWidth}px&quot; role=&quot;presentation&quot;&gt;&lt;/tpl&gt;',
                    '&lt;div class=&quot;{frameCls}-bc {baseCls}-bc {baseCls}-{ui}-bc&lt;tpl if=&quot;uiCls&quot;&gt;&lt;tpl for=&quot;uiCls&quot;&gt; {parent.baseCls}-{parent.ui}-{.}-bc&lt;/tpl&gt;&lt;/tpl&gt;&quot; style=&quot;background-position: {bc}; height: {frameWidth}px&quot; role=&quot;presentation&quot;&gt;&lt;/div&gt;',
                '&lt;tpl if=&quot;right&quot;&gt;&lt;/div&gt;&lt;/tpl&gt;',
            '&lt;tpl if=&quot;left&quot;&gt;&lt;/div&gt;&lt;/tpl&gt;',
        '&lt;/tpl&gt;'
    ],

    frameTableTpl: [
        '&lt;table&gt;&lt;tbody&gt;',
            '&lt;tpl if=&quot;top&quot;&gt;',
                '&lt;tr&gt;',
                    '&lt;tpl if=&quot;left&quot;&gt;&lt;td class=&quot;{frameCls}-tl {baseCls}-tl {baseCls}-{ui}-tl&lt;tpl if=&quot;uiCls&quot;&gt;&lt;tpl for=&quot;uiCls&quot;&gt; {parent.baseCls}-{parent.ui}-{.}-tl&lt;/tpl&gt;&lt;/tpl&gt;&quot; style=&quot;background-position: {tl}; padding-left:{frameWidth}px&quot; role=&quot;presentation&quot;&gt;&lt;/td&gt;&lt;/tpl&gt;',
                    '&lt;td class=&quot;{frameCls}-tc {baseCls}-tc {baseCls}-{ui}-tc&lt;tpl if=&quot;uiCls&quot;&gt;&lt;tpl for=&quot;uiCls&quot;&gt; {parent.baseCls}-{parent.ui}-{.}-tc&lt;/tpl&gt;&lt;/tpl&gt;&quot; style=&quot;background-position: {tc}; height: {frameWidth}px&quot; role=&quot;presentation&quot;&gt;&lt;/td&gt;',
                    '&lt;tpl if=&quot;right&quot;&gt;&lt;td class=&quot;{frameCls}-tr {baseCls}-tr {baseCls}-{ui}-tr&lt;tpl if=&quot;uiCls&quot;&gt;&lt;tpl for=&quot;uiCls&quot;&gt; {parent.baseCls}-{parent.ui}-{.}-tr&lt;/tpl&gt;&lt;/tpl&gt;&quot; style=&quot;background-position: {tr}; padding-left: {frameWidth}px&quot; role=&quot;presentation&quot;&gt;&lt;/td&gt;&lt;/tpl&gt;',
                '&lt;/tr&gt;',
            '&lt;/tpl&gt;',
            '&lt;tr&gt;',
                '&lt;tpl if=&quot;left&quot;&gt;&lt;td class=&quot;{frameCls}-ml {baseCls}-ml {baseCls}-{ui}-ml&lt;tpl if=&quot;uiCls&quot;&gt;&lt;tpl for=&quot;uiCls&quot;&gt; {parent.baseCls}-{parent.ui}-{.}-ml&lt;/tpl&gt;&lt;/tpl&gt;&quot; style=&quot;background-position: {ml}; padding-left: {frameWidth}px&quot; role=&quot;presentation&quot;&gt;&lt;/td&gt;&lt;/tpl&gt;',
                '&lt;td class=&quot;{frameCls}-mc {baseCls}-mc {baseCls}-{ui}-mc&lt;tpl if=&quot;uiCls&quot;&gt;&lt;tpl for=&quot;uiCls&quot;&gt; {parent.baseCls}-{parent.ui}-{.}-mc&lt;/tpl&gt;&lt;/tpl&gt;&quot; style=&quot;background-position: 0 0;&quot; role=&quot;presentation&quot;&gt;&lt;/td&gt;',
                '&lt;tpl if=&quot;right&quot;&gt;&lt;td class=&quot;{frameCls}-mr {baseCls}-mr {baseCls}-{ui}-mr&lt;tpl if=&quot;uiCls&quot;&gt;&lt;tpl for=&quot;uiCls&quot;&gt; {parent.baseCls}-{parent.ui}-{.}-mr&lt;/tpl&gt;&lt;/tpl&gt;&quot; style=&quot;background-position: {mr}; padding-left: {frameWidth}px&quot; role=&quot;presentation&quot;&gt;&lt;/td&gt;&lt;/tpl&gt;',
            '&lt;/tr&gt;',
            '&lt;tpl if=&quot;bottom&quot;&gt;',
                '&lt;tr&gt;',
                    '&lt;tpl if=&quot;left&quot;&gt;&lt;td class=&quot;{frameCls}-bl {baseCls}-bl {baseCls}-{ui}-bl&lt;tpl if=&quot;uiCls&quot;&gt;&lt;tpl for=&quot;uiCls&quot;&gt; {parent.baseCls}-{parent.ui}-{.}-bl&lt;/tpl&gt;&lt;/tpl&gt;&quot; style=&quot;background-position: {bl}; padding-left: {frameWidth}px&quot; role=&quot;presentation&quot;&gt;&lt;/td&gt;&lt;/tpl&gt;',
                    '&lt;td class=&quot;{frameCls}-bc {baseCls}-bc {baseCls}-{ui}-bc&lt;tpl if=&quot;uiCls&quot;&gt;&lt;tpl for=&quot;uiCls&quot;&gt; {parent.baseCls}-{parent.ui}-{.}-bc&lt;/tpl&gt;&lt;/tpl&gt;&quot; style=&quot;background-position: {bc}; height: {frameWidth}px&quot; role=&quot;presentation&quot;&gt;&lt;/td&gt;',
                    '&lt;tpl if=&quot;right&quot;&gt;&lt;td class=&quot;{frameCls}-br {baseCls}-br {baseCls}-{ui}-br&lt;tpl if=&quot;uiCls&quot;&gt;&lt;tpl for=&quot;uiCls&quot;&gt; {parent.baseCls}-{parent.ui}-{.}-br&lt;/tpl&gt;&lt;/tpl&gt;&quot; style=&quot;background-position: {br}; padding-left: {frameWidth}px&quot; role=&quot;presentation&quot;&gt;&lt;/td&gt;&lt;/tpl&gt;',
                '&lt;/tr&gt;',
            '&lt;/tpl&gt;',
        '&lt;/tbody&gt;&lt;/table&gt;'
    ],
    
<span id='Ext-AbstractComponent-method-initFrame'>    /**
</span>     * @private
     */
    initFrame : function() {
        if (Ext.supports.CSS3BorderRadius) {
            return false;
        }
        
        var me = this,
            frameInfo = me.getFrameInfo(),
            frameWidth = frameInfo.width,
            frameTpl = me.getFrameTpl(frameInfo.table);
                        
        if (me.frame) {
            // Here we render the frameTpl to this component. This inserts the 9point div or the table framing.
            frameTpl.insertFirst(me.el, Ext.apply({}, {
                ui:         me.ui,
                uiCls:      me.uiCls,
                frameCls:   me.frameCls,
                baseCls:    me.baseCls,
                frameWidth: frameWidth,
                top:        !!frameInfo.top,
                left:       !!frameInfo.left,
                right:      !!frameInfo.right,
                bottom:     !!frameInfo.bottom
            }, me.getFramePositions(frameInfo)));

            // The frameBody is returned in getTargetEl, so that layouts render items to the correct target.=
            me.frameBody = me.el.down('.' + me.frameCls + '-mc');
            
            // Add the render selectors for each of the frame elements
            Ext.apply(me.renderSelectors, {
                frameTL: '.' + me.baseCls + '-tl',
                frameTC: '.' + me.baseCls + '-tc',
                frameTR: '.' + me.baseCls + '-tr',
                frameML: '.' + me.baseCls + '-ml',
                frameMC: '.' + me.baseCls + '-mc',
                frameMR: '.' + me.baseCls + '-mr',
                frameBL: '.' + me.baseCls + '-bl',
                frameBC: '.' + me.baseCls + '-bc',
                frameBR: '.' + me.baseCls + '-br'
            });
        }
    },
    
    updateFrame: function() {
        if (Ext.supports.CSS3BorderRadius) {
            return false;
        }
        
        var me = this,
            wasTable = this.frameSize &amp;&amp; this.frameSize.table,
            oldFrameTL = this.frameTL,
            oldFrameBL = this.frameBL,
            oldFrameML = this.frameML,
            oldFrameMC = this.frameMC,
            newMCClassName;
        
        this.initFrame();
        
        if (oldFrameMC) {
            if (me.frame) {                
                // Reapply render selectors
                delete me.frameTL;
                delete me.frameTC;
                delete me.frameTR;
                delete me.frameML;
                delete me.frameMC;
                delete me.frameMR;
                delete me.frameBL;
                delete me.frameBC;
                delete me.frameBR;    
                this.applyRenderSelectors();
                
                // Store the class names set on the new mc
                newMCClassName = this.frameMC.dom.className;
                
                // Replace the new mc with the old mc
                oldFrameMC.insertAfter(this.frameMC);
                this.frameMC.remove();
                
                // Restore the reference to the old frame mc as the framebody
                this.frameBody = this.frameMC = oldFrameMC;
                
                // Apply the new mc classes to the old mc element
                oldFrameMC.dom.className = newMCClassName;
                
                // Remove the old framing
                if (wasTable) {
                    me.el.query('&gt; table')[1].remove();
                }                                
                else {
                    if (oldFrameTL) {
                        oldFrameTL.remove();
                    }
                    if (oldFrameBL) {
                        oldFrameBL.remove();
                    }
                    oldFrameML.remove();
                }
            }
            else {
                // We were framed but not anymore. Move all content from the old frame to the body
                
            }
        }
        else if (me.frame) {
            this.applyRenderSelectors();
        }
    },
    
    getFrameInfo: function() {
        if (Ext.supports.CSS3BorderRadius) {
            return false;
        }
        
        var me = this,
            left = me.el.getStyle('background-position-x'),
            top = me.el.getStyle('background-position-y'),
            info, frameInfo = false, max;

        // Some browsers dont support background-position-x and y, so for those
        // browsers let's split background-position into two parts.
        if (!left &amp;&amp; !top) {
            info = me.el.getStyle('background-position').split(' ');
            left = info[0];
            top = info[1];
        }
        
        // We actually pass a string in the form of '[type][tl][tr]px [type][br][bl]px' as
        // the background position of this.el from the css to indicate to IE that this component needs
        // framing. We parse it here and change the markup accordingly.
        if (parseInt(left, 10) &gt;= 1000000 &amp;&amp; parseInt(top, 10) &gt;= 1000000) {
            max = Math.max;
            
            frameInfo = {
                // Table markup starts with 110, div markup with 100.
                table: left.substr(0, 3) == '110',
                
                // Determine if we are dealing with a horizontal or vertical component
                vertical: top.substr(0, 3) == '110',
                
                // Get and parse the different border radius sizes
                top:    max(left.substr(3, 2), left.substr(5, 2)),
                right:  max(left.substr(5, 2), top.substr(3, 2)),
                bottom: max(top.substr(3, 2), top.substr(5, 2)),
                left:   max(top.substr(5, 2), left.substr(3, 2))
            };
            
            frameInfo.width = max(frameInfo.top, frameInfo.right, frameInfo.bottom, frameInfo.left);

            // Just to be sure we set the background image of the el to none.
            me.el.setStyle('background-image', 'none');
        }        
        
        // This happens when you set frame: true explicitly without using the x-frame mixin in sass.
        // This way IE can't figure out what sizes to use and thus framing can't work.
        if (me.frame === true &amp;&amp; !frameInfo) {
            //&lt;debug error&gt;
            Ext.Error.raise(&quot;You have set frame: true explicity on this component while it doesn't have any &quot; +
                            &quot;framing defined in the CSS template. In this case IE can't figure out what sizes &quot; +
                            &quot;to use and thus framing on this component will be disabled.&quot;);
            //&lt;/debug&gt;
        }
        
        me.frame = me.frame || !!frameInfo;
        me.frameSize = frameInfo || false;
        
        return frameInfo;
    },
    
    getFramePositions: function(frameInfo) {
        var me = this,
            frameWidth = frameInfo.width,
            dock = me.dock,
            positions, tc, bc, ml, mr;
            
        if (frameInfo.vertical) {
            tc = '0 -' + (frameWidth * 0) + 'px';
            bc = '0 -' + (frameWidth * 1) + 'px';
            
            if (dock &amp;&amp; dock == &quot;right&quot;) {
                tc = 'right -' + (frameWidth * 0) + 'px';
                bc = 'right -' + (frameWidth * 1) + 'px';
            }
            
            positions = {
                tl: '0 -' + (frameWidth * 0) + 'px',
                tr: '0 -' + (frameWidth * 1) + 'px',
                bl: '0 -' + (frameWidth * 2) + 'px',
                br: '0 -' + (frameWidth * 3) + 'px',

                ml: '-' + (frameWidth * 1) + 'px 0',
                mr: 'right 0',

                tc: tc,
                bc: bc
            };
        } else {
            ml = '-' + (frameWidth * 0) + 'px 0';
            mr = 'right 0';
            
            if (dock &amp;&amp; dock == &quot;bottom&quot;) {
                ml = 'left bottom';
                mr = 'right bottom';
            }
            
            positions = {
                tl: '0 -' + (frameWidth * 2) + 'px',
                tr: 'right -' + (frameWidth * 3) + 'px',
                bl: '0 -' + (frameWidth * 4) + 'px',
                br: 'right -' + (frameWidth * 5) + 'px',

                ml: ml,
                mr: mr,

                tc: '0 -' + (frameWidth * 0) + 'px',
                bc: '0 -' + (frameWidth * 1) + 'px'
            };
        }
        
        return positions;
    },
    
<span id='Ext-AbstractComponent-method-getFrameTpl'>    /**
</span>     * @private
     */
    getFrameTpl : function(table) {
        return table ? this.getTpl('frameTableTpl') : this.getTpl('frameTpl');
    },

<span id='Ext-AbstractComponent-method-initCls'>    /**
</span>     * &lt;p&gt;Creates an array of class names from the configurations to add to this Component's &lt;code&gt;el&lt;/code&gt; on render.&lt;/p&gt;
     * &lt;p&gt;Private, but (possibly) used by ComponentQuery for selection by class name if Component is not rendered.&lt;/p&gt;
     * @return {Array} An array of class names with which the Component's element will be rendered.
     * @private
     */
    initCls: function() {
        var me = this,
            cls = [];

        cls.push(me.baseCls);

        //&lt;deprecated since=0.99&gt;
        if (Ext.isDefined(me.cmpCls)) {
            if (Ext.isDefined(Ext.global.console)) {
                Ext.global.console.warn('Ext.Component: cmpCls has been deprecated. Please use componentCls.');
            }
            me.componentCls = me.cmpCls;
            delete me.cmpCls;
        }
        //&lt;/deprecated&gt;

        if (me.componentCls) {
            cls.push(me.componentCls);
        } else {
            me.componentCls = me.baseCls;
        }
        if (me.cls) {
            cls.push(me.cls);
            delete me.cls;
        }

        return cls.concat(me.additionalCls);
    },
    
<span id='Ext-AbstractComponent-method-setUI'>    /**
</span>     * Sets the UI for the component. This will remove any existing UIs on the component. It will also
     * loop through any uiCls set on the component and rename them so they include the new UI
     * @param {String} ui The new UI for the component
     */
    setUI: function(ui) {
        var me = this,
            oldUICls = Ext.Array.clone(me.uiCls),
            newUICls = [],
            cls,
            i;
        
        //loop through all exisiting uiCls and update the ui in them
        for (i = 0; i &lt; oldUICls.length; i++) {
            cls = oldUICls[i];
            
            me.removeClsWithUI(cls);
            newUICls.push(cls);
        }
        
        //remove the UI from the element
        me.removeUIFromElement();
        
        //set the UI
        me.ui = ui;
        
        //add the new UI to the elemend
        me.addUIToElement();
        
        //loop through all exisiting uiCls and update the ui in them
        for (i = 0; i &lt; newUICls.length; i++) {
            cls = newUICls[i];
            
            me.addClsWithUI(cls);
        }
    },
    
<span id='Ext-AbstractComponent-method-addClsWithUI'>    /**
</span>     * Adds a cls to the uiCls array, which will also call {@link #addUIClsToElement} and adds
     * to all elements of this component.
     * @param {String/Array} cls A string or an array of strings to add to the uiCls
     */
    addClsWithUI: function(cls) {
        var me = this,
            i;
        
        if (!Ext.isArray(cls)) {
            cls = [cls];
        }
        
        for (i = 0; i &lt; cls.length; i++) {
            if (cls[i] &amp;&amp; !me.hasUICls(cls[i])) {
                me.uiCls = Ext.Array.clone(me.uiCls);
                me.uiCls.push(cls[i]);
                me.addUIClsToElement(cls[i]);
            }
        }
    },
    
<span id='Ext-AbstractComponent-method-removeClsWithUI'>    /**
</span>     * Removes a cls to the uiCls array, which will also call {@link #removeUIClsToElement} and removes
     * it from all elements of this component.
     * @param {String/Array} cls A string or an array of strings to remove to the uiCls
     */
    removeClsWithUI: function(cls) {
        var me = this,
            i;
        
        if (!Ext.isArray(cls)) {
            cls = [cls];
        }
        
        for (i = 0; i &lt; cls.length; i++) {
            if (cls[i] &amp;&amp; me.hasUICls(cls[i])) {
                me.uiCls = Ext.Array.remove(me.uiCls, cls[i]);
                me.removeUIClsFromElement(cls[i]);
            }
        }
    },
    
<span id='Ext-AbstractComponent-method-hasUICls'>    /**
</span>     * Checks if there is currently a specified uiCls
     * @param {String} cls The cls to check
     */
    hasUICls: function(cls) {
        var me = this,
            uiCls = me.uiCls || [];
        
        return Ext.Array.contains(uiCls, cls);
    },
    
<span id='Ext-AbstractComponent-method-addUIClsToElement'>    /**
</span>     * Method which adds a specified UI + uiCls to the components element.
     * Can be overridden to remove the UI from more than just the components element.
     * @param {String} ui The UI to remove from the element
     * @private
     */
    addUIClsToElement: function(cls, force) {
        var me = this;
        
        me.addCls(Ext.baseCSSPrefix + cls);
        me.addCls(me.baseCls + '-' + cls);
        me.addCls(me.baseCls + '-' + me.ui + '-' + cls);
        
        if (!force &amp;&amp; me.rendered &amp;&amp; me.frame &amp;&amp; !Ext.supports.CSS3BorderRadius) {
            // define each element of the frame
            var els = ['tl', 'tc', 'tr', 'ml', 'mc', 'mr', 'bl', 'bc', 'br'],
                i, el;
            
            // loop through each of them, and if they are defined add the ui
            for (i = 0; i &lt; els.length; i++) {
                el = me['frame' + els[i].toUpperCase()];
                
                if (el &amp;&amp; el.dom) {
                    el.addCls(me.baseCls + '-' + me.ui + '-' + els[i]);
                    el.addCls(me.baseCls + '-' + me.ui + '-' + cls + '-' + els[i]);
                }
            }
        }
    },
    
<span id='Ext-AbstractComponent-method-removeUIClsFromElement'>    /**
</span>     * Method which removes a specified UI + uiCls from the components element.
     * The cls which is added to the element will be: `this.baseCls + '-' + ui`
     * @param {String} ui The UI to add to the element
     * @private
     */
    removeUIClsFromElement: function(cls, force) {
        var me = this;
        
        me.removeCls(Ext.baseCSSPrefix + cls);
        me.removeCls(me.baseCls + '-' + cls);
        me.removeCls(me.baseCls + '-' + me.ui + '-' + cls);
        
        if (!force &amp;&amp;me.rendered &amp;&amp; me.frame &amp;&amp; !Ext.supports.CSS3BorderRadius) {
            // define each element of the frame
            var els = ['tl', 'tc', 'tr', 'ml', 'mc', 'mr', 'bl', 'bc', 'br'],
                i, el;
            
            // loop through each of them, and if they are defined add the ui
            for (i = 0; i &lt; els.length; i++) {
                el = me['frame' + els[i].toUpperCase()];
                if (el &amp;&amp; el.dom) {
                    el.removeCls(me.baseCls + '-' + me.ui + '-' + cls + '-' + els[i]);
                }
            }
        }
    },
    
<span id='Ext-AbstractComponent-method-addUIToElement'>    /**
</span>     * Method which adds a specified UI to the components element.
     * @private
     */
    addUIToElement: function(force) {
        var me = this;
        
        me.addCls(me.baseCls + '-' + me.ui);
        
        if (me.rendered &amp;&amp; me.frame &amp;&amp; !Ext.supports.CSS3BorderRadius) {
            // define each element of the frame
            var els = ['tl', 'tc', 'tr', 'ml', 'mc', 'mr', 'bl', 'bc', 'br'],
                i, el;
            
            // loop through each of them, and if they are defined add the ui
            for (i = 0; i &lt; els.length; i++) {
                el = me['frame' + els[i].toUpperCase()];
                
                if (el) {
                    el.addCls(me.baseCls + '-' + me.ui + '-' + els[i]);
                }
            }
        }
    },
    
<span id='Ext-AbstractComponent-method-removeUIFromElement'>    /**
</span>     * Method which removes a specified UI from the components element.
     * @private
     */
    removeUIFromElement: function() {
        var me = this;
        
        me.removeCls(me.baseCls + '-' + me.ui);
        
        if (me.rendered &amp;&amp; me.frame &amp;&amp; !Ext.supports.CSS3BorderRadius) {
            // define each element of the frame
            var els = ['tl', 'tc', 'tr', 'ml', 'mc', 'mr', 'bl', 'bc', 'br'],
                i, el;
            
            // loop through each of them, and if they are defined add the ui
            for (i = 0; i &lt; els.length; i++) {
                el = me['frame' + els[i].toUpperCase()];
                if (el) {
                    el.removeCls(me.baseCls + '-' + me.ui + '-' + els[i]);
                }
            }
        }
    },
    
    getElConfig : function() {
        var result = this.autoEl || {tag: 'div'};
        result.id = this.id;
        return result;
    },

<span id='Ext-AbstractComponent-method-getInsertPosition'>    /**
</span>     * This function takes the position argument passed to onRender and returns a
     * DOM element that you can use in the insertBefore.
     * @param {String/Number/Element/HTMLElement} position Index, element id or element you want
     * to put this component before.
     * @return {HTMLElement} DOM element that you can use in the insertBefore
     */
    getInsertPosition: function(position) {
        // Convert the position to an element to insert before
        if (position !== undefined) {
            if (Ext.isNumber(position)) {
                position = this.container.dom.childNodes[position];
            }
            else {
                position = Ext.getDom(position);
            }
        }

        return position;
    },

<span id='Ext-AbstractComponent-method-initContainer'>    /**
</span>     * Adds ctCls to container.
     * @return {Ext.core.Element} The initialized container
     * @private
     */
    initContainer: function(container) {
        var me = this;

        // If you render a component specifying the el, we get the container
        // of the el, and make sure we dont move the el around in the dom
        // during the render
        if (!container &amp;&amp; me.el) {
            container = me.el.dom.parentNode;
            me.allowDomMove = false;
        }

        me.container = Ext.get(container);

        if (me.ctCls) {
            me.container.addCls(me.ctCls);
        }

        return me.container;
    },

<span id='Ext-AbstractComponent-method-initRenderData'>    /**
</span>     * Initialized the renderData to be used when rendering the renderTpl.
     * @return {Object} Object with keys and values that are going to be applied to the renderTpl
     * @private
     */
    initRenderData: function() {
        var me = this;

        return Ext.applyIf(me.renderData, {
            ui: me.ui,
            uiCls: me.uiCls,
            baseCls: me.baseCls,
            componentCls: me.componentCls,
            frame: me.frame
        });
    },

<span id='Ext-AbstractComponent-method-getTpl'>    /**
</span>     * @private
     */
    getTpl: function(name) {
        var prototype = this.self.prototype,
            ownerPrototype;

        if (this.hasOwnProperty(name)) {
            if (!(this[name] instanceof Ext.XTemplate)) {
                this[name] = Ext.ClassManager.dynInstantiate('Ext.XTemplate', this[name]);
            }

            return this[name];
        }

        if (!(prototype[name] instanceof Ext.XTemplate)) {
            ownerPrototype = prototype;

            do {
                if (ownerPrototype.hasOwnProperty(name)) {
                    ownerPrototype[name] = Ext.ClassManager.dynInstantiate('Ext.XTemplate', ownerPrototype[name]);
                    break;
                }

                ownerPrototype = ownerPrototype.superclass;
            } while (ownerPrototype);
        }

        return prototype[name];
    },

<span id='Ext-AbstractComponent-method-initRenderTpl'>    /**
</span>     * Initializes the renderTpl.
     * @return {Ext.XTemplate} The renderTpl XTemplate instance.
     * @private
     */
    initRenderTpl: function() {
        return this.getTpl('renderTpl');
    },

<span id='Ext-AbstractComponent-method-initStyles'>    /**
</span>     * Function description
     * @return {String} A CSS style string with style, padding, margin and border.
     * @private
     */
    initStyles: function() {
        var style = {},
            me = this,
            Element = Ext.core.Element;

        if (Ext.isString(me.style)) {
            style = Element.parseStyles(me.style);
        } else {
            style = Ext.apply({}, me.style);
        }

        // Convert the padding, margin and border properties from a space seperated string
        // into a proper style string
        if (me.padding !== undefined) {
            style.padding = Element.unitizeBox((me.padding === true) ? 5 : me.padding);
        }

        if (me.margin !== undefined) {
            style.margin = Element.unitizeBox((me.margin === true) ? 5 : me.margin);
        }

        delete me.style;
        return style;
    },

<span id='Ext-AbstractComponent-method-initContent'>    /**
</span>     * Initializes this components contents. It checks for the properties
     * html, contentEl and tpl/data.
     * @private
     */
    initContent: function() {
        var me = this,
            target = me.getTargetEl(),
            contentEl,
            pre;

        if (me.html) {
            target.update(Ext.core.DomHelper.markup(me.html));
            delete me.html;
        }

        if (me.contentEl) {
            contentEl = Ext.get(me.contentEl);
            pre = Ext.baseCSSPrefix;
            contentEl.removeCls([pre + 'hidden', pre + 'hide-display', pre + 'hide-offsets', pre + 'hide-nosize']);
            target.appendChild(contentEl.dom);
        }

        if (me.tpl) {
            // Make sure this.tpl is an instantiated XTemplate
            if (!me.tpl.isTemplate) {
                me.tpl = Ext.create('Ext.XTemplate', me.tpl);
            }

            if (me.data) {
                me.tpl[me.tplWriteMode](target, me.data);
                delete me.data;
            }
        }
    },

    // @private
    initEvents : function() {
        var me = this,
            afterRenderEvents = me.afterRenderEvents,
            property, listeners;
        if (afterRenderEvents) {
            for (property in afterRenderEvents) {
                if (afterRenderEvents.hasOwnProperty(property)) {
                    listeners = afterRenderEvents[property];
                    if (me[property] &amp;&amp; me[property].on) {
                        me.mon(me[property], listeners);
                    }
                }
            }
        }
    },

<span id='Ext-AbstractComponent-method-applyRenderSelectors'>    /**
</span>     * Sets references to elements inside the component. E.g body -&gt; x-panel-body
     * @private
     */
    applyRenderSelectors: function() {
        var selectors = this.renderSelectors || {},
            el = this.el.dom,
            selector;

        for (selector in selectors) {
            if (selectors.hasOwnProperty(selector) &amp;&amp; selectors[selector]) {
                this[selector] = Ext.get(Ext.DomQuery.selectNode(selectors[selector], el));
            }
        }
    },

<span id='Ext-AbstractComponent-method-is'>    /**
</span>     * Tests whether this Component matches the selector string.
     * @param {String} selector The selector string to test against.
     * @return {Boolean} True if this Component matches the selector.
     */
    is: function(selector) {
        return Ext.ComponentQuery.is(this, selector);
    },

<span id='Ext-AbstractComponent-method-up'>    /**
</span>     * &lt;p&gt;Walks up the &lt;code&gt;ownerCt&lt;/code&gt; axis looking for an ancestor Container which matches
     * the passed simple selector.&lt;/p&gt;
     * &lt;p&gt;Example:&lt;pre&gt;&lt;code&gt;
var owningTabPanel = grid.up('tabpanel');
&lt;/code&gt;&lt;/pre&gt;
     * @param {String} selector Optional. The simple selector to test.
     * @return {Container} The matching ancestor Container (or &lt;code&gt;undefined&lt;/code&gt; if no match was found).
     */
    up: function(selector) {
        var result = this.ownerCt;
        if (selector) {
            for (; result; result = result.ownerCt) {
                if (Ext.ComponentQuery.is(result, selector)) {
                    return result;
                }
            }
        }
        return result;
    },

<span id='Ext-AbstractComponent-method-nextSibling'>    /**
</span>     * &lt;p&gt;Returns the next sibling of this Component.&lt;/p&gt;
     * &lt;p&gt;Optionally selects the next sibling which matches the passed {@link Ext.ComponentQuery ComponentQuery} selector.&lt;/p&gt;
     * &lt;p&gt;May also be refered to as &lt;code&gt;&lt;b&gt;next()&lt;/b&gt;&lt;/code&gt;&lt;/p&gt;
     * &lt;p&gt;Note that this is limited to siblings, and if no siblings of the item match, &lt;code&gt;null&lt;/code&gt; is returned. Contrast with {@link #nextNode}&lt;/p&gt;
     * @param {String} selector Optional A {@link Ext.ComponentQuery ComponentQuery} selector to filter the following items.
     * @returns The next sibling (or the next sibling which matches the selector). Returns null if there is no matching sibling.
     */
    nextSibling: function(selector) {
        var o = this.ownerCt, it, last, idx, c;
        if (o) {
            it = o.items;
            idx = it.indexOf(this) + 1;
            if (idx) {
                if (selector) {
                    for (last = it.getCount(); idx &lt; last; idx++) {
                        if ((c = it.getAt(idx)).is(selector)) {
                            return c;
                        }
                    }
                } else {
                    if (idx &lt; it.getCount()) {
                        return it.getAt(idx);
                    }
                }
            }
        }
        return null;
    },

<span id='Ext-AbstractComponent-method-previousSibling'>    /**
</span>     * &lt;p&gt;Returns the previous sibling of this Component.&lt;/p&gt;
     * &lt;p&gt;Optionally selects the previous sibling which matches the passed {@link Ext.ComponentQuery ComponentQuery} selector.&lt;/p&gt;
     * &lt;p&gt;May also be refered to as &lt;code&gt;&lt;b&gt;prev()&lt;/b&gt;&lt;/code&gt;&lt;/p&gt;
     * &lt;p&gt;Note that this is limited to siblings, and if no siblings of the item match, &lt;code&gt;null&lt;/code&gt; is returned. Contrast with {@link #previousNode}&lt;/p&gt;
     * @param {String} selector Optional. A {@link Ext.ComponentQuery ComponentQuery} selector to filter the preceding items.
     * @returns The previous sibling (or the previous sibling which matches the selector). Returns null if there is no matching sibling.
     */
    previousSibling: function(selector) {
        var o = this.ownerCt, it, idx, c;
        if (o) {
            it = o.items;
            idx = it.indexOf(this);
            if (idx != -1) {
                if (selector) {
                    for (--idx; idx &gt;= 0; idx--) {
                        if ((c = it.getAt(idx)).is(selector)) {
                            return c;
                        }
                    }
                } else {
                    if (idx) {
                        return it.getAt(--idx);
                    }
                }
            }
        }
        return null;
    },

<span id='Ext-AbstractComponent-method-previousNode'>    /**
</span>     * &lt;p&gt;Returns the previous node in the Component tree in tree traversal order.&lt;/p&gt;
     * &lt;p&gt;Note that this is not limited to siblings, and if invoked upon a node with no matching siblings, will
     * walk the tree in reverse order to attempt to find a match. Contrast with {@link #previousSibling}.&lt;/p&gt;
     * @param {String} selector Optional. A {@link Ext.ComponentQuery ComponentQuery} selector to filter the preceding nodes.
     * @returns The previous node (or the previous node which matches the selector). Returns null if there is no matching node.
     */
    previousNode: function(selector, includeSelf) {
        var node = this,
            result,
            it, len, i;

        // If asked to include self, test me
        if (includeSelf &amp;&amp; node.is(selector)) {
            return node;
        }

        result = this.prev(selector);
        if (result) {
            return result;
        }

        if (node.ownerCt) {
            for (it = node.ownerCt.items.items, i = Ext.Array.indexOf(it, node) - 1; i &gt; -1; i--) {
                if (it[i].query) {
                    result = it[i].query(selector);
                    result = result[result.length - 1];
                    if (result) {
                        return result;
                    }
                }
            }
            return node.ownerCt.previousNode(selector, true);
        }
    },

<span id='Ext-AbstractComponent-method-nextNode'>    /**
</span>     * &lt;p&gt;Returns the next node in the Component tree in tree traversal order.&lt;/p&gt;
     * &lt;p&gt;Note that this is not limited to siblings, and if invoked upon a node with no matching siblings, will
     * walk the tree to attempt to find a match. Contrast with {@link #pnextSibling}.&lt;/p&gt;
     * @param {String} selector Optional A {@link Ext.ComponentQuery ComponentQuery} selector to filter the following nodes.
     * @returns The next node (or the next node which matches the selector). Returns null if there is no matching node.
     */
    nextNode: function(selector, includeSelf) {
        var node = this,
            result,
            it, len, i;

        // If asked to include self, test me
        if (includeSelf &amp;&amp; node.is(selector)) {
            return node;
        }

        result = this.next(selector);
        if (result) {
            return result;
        }

        if (node.ownerCt) {
            for (it = node.ownerCt.items, i = it.indexOf(node) + 1, it = it.items, len = it.length; i &lt; len; i++) {
                if (it[i].down) {
                    result = it[i].down(selector);
                    if (result) {
                        return result;
                    }
                }
            }
            return node.ownerCt.nextNode(selector);
        }
    },

<span id='Ext-AbstractComponent-method-getId'>    /**
</span>     * Retrieves the id of this component.
     * Will autogenerate an id if one has not already been set.
     */
    getId : function() {
        return this.id || (this.id = 'ext-comp-' + (this.getAutoId()));
    },

    getItemId : function() {
        return this.itemId || this.id;
    },

<span id='Ext-AbstractComponent-method-getEl'>    /**
</span>     * Retrieves the top level element representing this component.
     */
    getEl : function() {
        return this.el;
    },

<span id='Ext-AbstractComponent-method-getTargetEl'>    /**
</span>     * This is used to determine where to insert the 'html', 'contentEl' and 'items' in this component.
     * @private
     */
    getTargetEl: function() {
        return this.frameBody || this.el;
    },

<span id='Ext-AbstractComponent-method-isXType'>    /**
</span>     * &lt;p&gt;Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
     * from the xtype (default) or whether it is directly of the xtype specified (shallow = true).&lt;/p&gt;
     * &lt;p&gt;&lt;b&gt;If using your own subclasses, be aware that a Component must register its own xtype
     * to participate in determination of inherited xtypes.&lt;/b&gt;&lt;/p&gt;
     * &lt;p&gt;For a list of all available xtypes, see the {@link Ext.Component} header.&lt;/p&gt;
     * &lt;p&gt;Example usage:&lt;/p&gt;
     * &lt;pre&gt;&lt;code&gt;
var t = new Ext.form.field.Text();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('field');       // true, descended from Ext.form.field.Base
var isBoxInstance = t.isXType('field', true); // false, not a direct Ext.form.field.Base instance
&lt;/code&gt;&lt;/pre&gt;
     * @param {String} xtype The xtype to check for this Component
     * @param {Boolean} shallow (optional) False to check whether this Component is descended from the xtype (this is
     * the default), or true to check whether this Component is directly of the specified xtype.
     * @return {Boolean} True if this component descends from the specified xtype, false otherwise.
     */
    isXType: function(xtype, shallow) {
        //assume a string by default
        if (Ext.isFunction(xtype)) {
            xtype = xtype.xtype;
            //handle being passed the class, e.g. Ext.Component
        } else if (Ext.isObject(xtype)) {
            xtype = xtype.statics().xtype;
            //handle being passed an instance
        }

        return !shallow ? ('/' + this.getXTypes() + '/').indexOf('/' + xtype + '/') != -1: this.self.xtype == xtype;
    },

<span id='Ext-AbstractComponent-method-getXTypes'>    /**
</span>     * &lt;p&gt;Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all
     * available xtypes, see the {@link Ext.Component} header.&lt;/p&gt;
     * &lt;p&gt;&lt;b&gt;If using your own subclasses, be aware that a Component must register its own xtype
     * to participate in determination of inherited xtypes.&lt;/b&gt;&lt;/p&gt;
     * &lt;p&gt;Example usage:&lt;/p&gt;
     * &lt;pre&gt;&lt;code&gt;
var t = new Ext.form.field.Text();
alert(t.getXTypes());  // alerts 'component/field/textfield'
&lt;/code&gt;&lt;/pre&gt;
     * @return {String} The xtype hierarchy string
     */
    getXTypes: function() {
        var self = this.self,
            xtypes      = [],
            parentPrototype  = this,
            xtype;

        if (!self.xtypes) {
            while (parentPrototype &amp;&amp; Ext.getClass(parentPrototype)) {
                xtype = Ext.getClass(parentPrototype).xtype;

                if (xtype !== undefined) {
                    xtypes.unshift(xtype);
                }

                parentPrototype = parentPrototype.superclass;
            }

            self.xtypeChain = xtypes;
            self.xtypes = xtypes.join('/');
        }

        return self.xtypes;
    },

<span id='Ext-AbstractComponent-method-update'>    /**
</span>     * Update the content area of a component.
     * @param {Mixed} htmlOrData
     * If this component has been configured with a template via the tpl config
     * then it will use this argument as data to populate the template.
     * If this component was not configured with a template, the components
     * content area will be updated via Ext.core.Element update
     * @param {Boolean} loadScripts
     * (optional) Only legitimate when using the html configuration. Defaults to false
     * @param {Function} callback
     * (optional) Only legitimate when using the html configuration. Callback to execute when scripts have finished loading
     */
    update : function(htmlOrData, loadScripts, cb) {
        var me = this;

        if (me.tpl &amp;&amp; !Ext.isString(htmlOrData)) {
            me.data = htmlOrData;
            if (me.rendered) {
                me.tpl[me.tplWriteMode](me.getTargetEl(), htmlOrData || {});
            }
        } else {
            me.html = Ext.isObject(htmlOrData) ? Ext.core.DomHelper.markup(htmlOrData) : htmlOrData;
            if (me.rendered) {
                me.getTargetEl().update(me.html, loadScripts, cb);
            }
        }

        if (me.rendered) {
            me.doComponentLayout();
        }
    },

<span id='Ext-AbstractComponent-method-setVisible'>    /**
</span>     * Convenience function to hide or show this component by boolean.
     * @param {Boolean} visible True to show, false to hide
     * @return {Ext.Component} this
     */
    setVisible : function(visible) {
        return this[visible ? 'show': 'hide']();
    },

<span id='Ext-AbstractComponent-method-isVisible'>    /**
</span>     * Returns true if this component is visible.
     * @param {Boolean} deep. &lt;p&gt;Optional. Pass &lt;code&gt;true&lt;/code&gt; to interrogate the visibility status of all
     * parent Containers to determine whether this Component is truly visible to the user.&lt;/p&gt;
     * &lt;p&gt;Generally, to determine whether a Component is hidden, the no argument form is needed. For example
     * when creating dynamically laid out UIs in a hidden Container before showing them.&lt;/p&gt;
     * @return {Boolean} True if this component is visible, false otherwise.
     */
    isVisible: function(deep) {
        var me = this,
            child = me,
            visible = !me.hidden,
            ancestor = me.ownerCt;

        // Clear hiddenOwnerCt property
        me.hiddenAncestor = false;
        if (me.destroyed) {
            return false;
        }

        if (deep &amp;&amp; visible &amp;&amp; me.rendered &amp;&amp; ancestor) {
            while (ancestor) {
                // If any ancestor is hidden, then this is hidden.
                // If an ancestor Panel (only Panels have a collapse method) is collapsed,
                // then its layoutTarget (body) is hidden, so this is hidden unless its within a
                // docked item; they are still visible when collapsed (Unless they themseves are hidden)
                if (ancestor.hidden || (ancestor.collapsed &amp;&amp;
                        !(ancestor.getDockedItems &amp;&amp; Ext.Array.contains(ancestor.getDockedItems(), child)))) {
                    // Store hiddenOwnerCt property if needed
                    me.hiddenAncestor = ancestor;
                    visible = false;
                    break;
                }
                child = ancestor;
                ancestor = ancestor.ownerCt;
            }
        }
        return visible;
    },

<span id='Ext-AbstractComponent-method-enable'>    /**
</span>     * Enable the component
     * @param {Boolean} silent
     * Passing false will supress the 'enable' event from being fired.
     */
    enable: function(silent) {
        var me = this;

        if (me.rendered) {
            me.el.removeCls(me.disabledCls);
            me.el.dom.disabled = false;
            me.onEnable();
        }

        me.disabled = false;

        if (silent !== true) {
            me.fireEvent('enable', me);
        }

        return me;
    },

<span id='Ext-AbstractComponent-method-disable'>    /**
</span>     * Disable the component.
     * @param {Boolean} silent
     * Passing true, will supress the 'disable' event from being fired.
     */
    disable: function(silent) {
        var me = this;

        if (me.rendered) {
            me.el.addCls(me.disabledCls);
            me.el.dom.disabled = true;
            me.onDisable();
        }

        me.disabled = true;

        if (silent !== true) {
            me.fireEvent('disable', me);
        }

        return me;
    },
    
    // @private
    onEnable: function() {
        if (this.maskOnDisable) {
            this.el.unmask();
        }        
    },

    // @private
    onDisable : function() {
        if (this.maskOnDisable) {
            this.el.mask();
        }
    },
    
<span id='Ext-AbstractComponent-method-isDisabled'>    /**
</span>     * Method to determine whether this Component is currently disabled.
     * @return {Boolean} the disabled state of this Component.
     */
    isDisabled : function() {
        return this.disabled;
    },

<span id='Ext-AbstractComponent-method-setDisabled'>    /**
</span>     * Enable or disable the component.
     * @param {Boolean} disabled
     */
    setDisabled : function(disabled) {
        return this[disabled ? 'disable': 'enable']();
    },

<span id='Ext-AbstractComponent-method-isHidden'>    /**
</span>     * Method to determine whether this Component is currently set to hidden.
     * @return {Boolean} the hidden state of this Component.
     */
    isHidden : function() {
        return this.hidden;
    },

<span id='Ext-AbstractComponent-method-addCls'>    /**
</span>     * Adds a CSS class to the top level element representing this component.
     * @param {String} cls The CSS class name to add
     * @return {Ext.Component} Returns the Component to allow method chaining.
     */
    addCls : function(className) {
        var me = this;
        if (!className) {
            return me;
        }
        if (!Ext.isArray(className)){
            className = className.replace(me.trimRe, '').split(me.spacesRe);
        }
        if (me.rendered) {
            me.el.addCls(className);
        }
        else {
            me.additionalCls = Ext.Array.unique(me.additionalCls.concat(className));
        }
        return me;
    },

<span id='Ext-AbstractComponent-method-addClass'>    /**
</span>     * @deprecated 4.0 Replaced by {link:#addCls}
     * Adds a CSS class to the top level element representing this component.
     * @param {String} cls The CSS class name to add
     * @return {Ext.Component} Returns the Component to allow method chaining.
     */
    addClass : function() {
        return this.addCls.apply(this, arguments);
    },

<span id='Ext-AbstractComponent-method-removeCls'>    /**
</span>     * Removes a CSS class from the top level element representing this component.
     * @returns {Ext.Component} Returns the Component to allow method chaining.
     */
    removeCls : function(className) {
        var me = this;

        if (!className) {
            return me;
        }
        if (!Ext.isArray(className)){
            className = className.replace(me.trimRe, '').split(me.spacesRe);
        }
        if (me.rendered) {
            me.el.removeCls(className);
        }
        else if (me.additionalCls.length) {
            Ext.each(className, function(cls) {
                Ext.Array.remove(me.additionalCls, cls);
            });
        }
        return me;
    },

    //&lt;debug&gt;
    removeClass : function() {
        if (Ext.isDefined(Ext.global.console)) {
            Ext.global.console.warn('Ext.Component: removeClass has been deprecated. Please use removeCls.');
        }
        return this.removeCls.apply(this, arguments);
    },
    //&lt;/debug&gt;

    addOverCls: function() {
        var me = this;
        if (!me.disabled) {
            me.el.addCls(me.overCls);
        }
    },

    removeOverCls: function() {
        this.el.removeCls(this.overCls);
    },

    addListener : function(element, listeners, scope, options) {
        var me = this,
            fn,
            option;

        if (Ext.isString(element) &amp;&amp; (Ext.isObject(listeners) || options &amp;&amp; options.element)) {
            if (options.element) {
                fn = listeners;

                listeners = {};
                listeners[element] = fn;
                element = options.element;
                if (scope) {
                    listeners.scope = scope;
                }

                for (option in options) {
                    if (options.hasOwnProperty(option)) {
                        if (me.eventOptionsRe.test(option)) {
                            listeners[option] = options[option];
                        }
                    }
                }
            }

            // At this point we have a variable called element,
            // and a listeners object that can be passed to on
            if (me[element] &amp;&amp; me[element].on) {
                me.mon(me[element], listeners);
            } else {
                me.afterRenderEvents = me.afterRenderEvents || {};
                me.afterRenderEvents[element] = listeners;
            }
        }

        return me.mixins.observable.addListener.apply(me, arguments);
    },

    // @TODO: implement removelistener to support the dom event stuff

<span id='Ext-AbstractComponent-method-getBubbleTarget'>    /**
</span>     * Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
     * @return {Ext.container.Container} the Container which owns this Component.
     */
    getBubbleTarget : function() {
        return this.ownerCt;
    },

<span id='Ext-AbstractComponent-method-isFloating'>    /**
</span>     * Method to determine whether this Component is floating.
     * @return {Boolean} the floating state of this component.
     */
    isFloating : function() {
        return this.floating;
    },

<span id='Ext-AbstractComponent-method-isDraggable'>    /**
</span>     * Method to determine whether this Component is draggable.
     * @return {Boolean} the draggable state of this component.
     */
    isDraggable : function() {
        return !!this.draggable;
    },

<span id='Ext-AbstractComponent-method-isDroppable'>    /**
</span>     * Method to determine whether this Component is droppable.
     * @return {Boolean} the droppable state of this component.
     */
    isDroppable : function() {
        return !!this.droppable;
    },

<span id='Ext-AbstractComponent-method-onAdded'>    /**
</span>     * @private
     * Method to manage awareness of when components are added to their
     * respective Container, firing an added event.
     * References are established at add time rather than at render time.
     * @param {Ext.container.Container} container Container which holds the component
     * @param {number} pos Position at which the component was added
     */
    onAdded : function(container, pos) {
        this.ownerCt = container;
        this.fireEvent('added', this, container, pos);
    },

<span id='Ext-AbstractComponent-method-onRemoved'>    /**
</span>     * @private
     * Method to manage awareness of when components are removed from their
     * respective Container, firing an removed event. References are properly
     * cleaned up after removing a component from its owning container.
     */
    onRemoved : function() {
        var me = this;

        me.fireEvent('removed', me, me.ownerCt);
        delete me.ownerCt;
    },

    // @private
    beforeDestroy : Ext.emptyFn,
    // @private
    // @private
    onResize : Ext.emptyFn,

<span id='Ext-AbstractComponent-method-setSize'>    /**
</span>     * Sets the width and height of this Component. This method fires the {@link #resize} event. This method can accept
     * either width and height as separate arguments, or you can pass a size object like &lt;code&gt;{width:10, height:20}&lt;/code&gt;.
     * @param {Mixed} width The new width to set. This may be one of:&lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
     * &lt;li&gt;A Number specifying the new width in the {@link #getEl Element}'s {@link Ext.core.Element#defaultUnit}s (by default, pixels).&lt;/li&gt;
     * &lt;li&gt;A String used to set the CSS width style.&lt;/li&gt;
     * &lt;li&gt;A size object in the format &lt;code&gt;{width: widthValue, height: heightValue}&lt;/code&gt;.&lt;/li&gt;
     * &lt;li&gt;&lt;code&gt;undefined&lt;/code&gt; to leave the width unchanged.&lt;/li&gt;
     * &lt;/ul&gt;&lt;/div&gt;
     * @param {Mixed} height The new height to set (not required if a size object is passed as the first arg).
     * This may be one of:&lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
     * &lt;li&gt;A Number specifying the new height in the {@link #getEl Element}'s {@link Ext.core.Element#defaultUnit}s (by default, pixels).&lt;/li&gt;
     * &lt;li&gt;A String used to set the CSS height style. Animation may &lt;b&gt;not&lt;/b&gt; be used.&lt;/li&gt;
     * &lt;li&gt;&lt;code&gt;undefined&lt;/code&gt; to leave the height unchanged.&lt;/li&gt;
     * &lt;/ul&gt;&lt;/div&gt;
     * @return {Ext.Component} this
     */
    setSize : function(width, height) {
        var me = this,
            layoutCollection;

        // support for standard size objects
        if (Ext.isObject(width)) {
            height = width.height;
            width  = width.width;
        }

        // Constrain within configured maxima
        if (Ext.isNumber(width)) {
            width = Ext.Number.constrain(width, me.minWidth, me.maxWidth);
        }
        if (Ext.isNumber(height)) {
            height = Ext.Number.constrain(height, me.minHeight, me.maxHeight);
        }

        if (!me.rendered || !me.isVisible()) {
            // If an ownerCt is hidden, add my reference onto the layoutOnShow stack.  Set the needsLayout flag.
            if (me.hiddenAncestor) {
                layoutCollection = me.hiddenAncestor.layoutOnShow;
                layoutCollection.remove(me);
                layoutCollection.add(me);
            }
            me.needsLayout = {
                width: width,
                height: height,
                isSetSize: true
            };
            if (!me.rendered) {
                me.width  = (width !== undefined) ? width : me.width;
                me.height = (height !== undefined) ? height : me.height;
            }
            return me;
        }
        me.doComponentLayout(width, height, true);

        return me;
    },

    setCalculatedSize : function(width, height, ownerCt) {
        var me = this,
            layoutCollection;

        // support for standard size objects
        if (Ext.isObject(width)) {
            ownerCt = width.ownerCt;
            height = width.height;
            width  = width.width;
        }

        // Constrain within configured maxima
        if (Ext.isNumber(width)) {
            width = Ext.Number.constrain(width, me.minWidth, me.maxWidth);
        }
        if (Ext.isNumber(height)) {
            height = Ext.Number.constrain(height, me.minHeight, me.maxHeight);
        }

        if (!me.rendered || !me.isVisible()) {
            // If an ownerCt is hidden, add my reference onto the layoutOnShow stack.  Set the needsLayout flag.
            if (me.hiddenAncestor) {
                layoutCollection = me.hiddenAncestor.layoutOnShow;
                layoutCollection.remove(me);
                layoutCollection.add(me);
            }
            me.needsLayout = {
                width: width,
                height: height,
                isSetSize: false,
                ownerCt: ownerCt
            };
            return me;
        }
        me.doComponentLayout(width, height, false, ownerCt);

        return me;
    },

<span id='Ext-AbstractComponent-method-doComponentLayout'>    /**
</span>     * This method needs to be called whenever you change something on this component that requires the Component's
     * layout to be recalculated.
     * @return {Ext.container.Container} this
     */
    doComponentLayout : function(width, height, isSetSize, ownerCt) {
        var me = this,
            componentLayout = me.getComponentLayout();

        // collapsed state is not relevant here, so no testing done.
        // Only Panels have a collapse method, and that just sets the width/height such that only
        // a single docked Header parallel to the collapseTo side are visible, and the Panel body is hidden.
        if (me.rendered &amp;&amp; componentLayout) {
            width = (width !== undefined) ? width : me.width;
            height = (height !== undefined) ? height : me.height;
            if (isSetSize) {
                me.width = width;
                me.height = height;
            }

            componentLayout.layout(width, height, isSetSize, ownerCt);
        }
        return me;
    },

    // @private
    setComponentLayout : function(layout) {
        var currentLayout = this.componentLayout;
        if (currentLayout &amp;&amp; currentLayout.isLayout &amp;&amp; currentLayout != layout) {
            currentLayout.setOwner(null);
        }
        this.componentLayout = layout;
        layout.setOwner(this);
    },

    getComponentLayout : function() {
        var me = this;

        if (!me.componentLayout || !me.componentLayout.isLayout) {
            me.setComponentLayout(Ext.layout.Layout.create(me.componentLayout, 'autocomponent'));
        }
        return me.componentLayout;
    },

<span id='Ext-AbstractComponent-method-afterComponentLayout'>    /**
</span>     * @param {Number} adjWidth The box-adjusted width that was set
     * @param {Number} adjHeight The box-adjusted height that was set
     * @param {Boolean} isSetSize Whether or not the height/width are stored on the component permanently
     * @param {Ext.Component} layoutOwner Component which sent the layout. Only used when isSetSize is false.
     */
    afterComponentLayout: function(width, height, isSetSize, layoutOwner) {
        this.fireEvent('resize', this, width, height);
    },

<span id='Ext-AbstractComponent-method-beforeComponentLayout'>    /**
</span>     * Occurs before componentLayout is run. Returning false from this method will prevent the componentLayout
     * from being executed.
     * @param {Number} adjWidth The box-adjusted width that was set
     * @param {Number} adjHeight The box-adjusted height that was set
     * @param {Boolean} isSetSize Whether or not the height/width are stored on the component permanently
     * @param {Ext.Component} layoutOwner Component which sent the layout. Only used when isSetSize is false.
     */
    beforeComponentLayout: function(width, height, isSetSize, layoutOwner) {
        return true;
    },

<span id='Ext-AbstractComponent-method-setPosition'>    /**
</span>     * Sets the left and top of the component.  To set the page XY position instead, use {@link #setPagePosition}.
     * This method fires the {@link #move} event.
     * @param {Number} left The new left
     * @param {Number} top The new top
     * @return {Ext.Component} this
     */
    setPosition : function(x, y) {
        var me = this;

        if (Ext.isObject(x)) {
            y = x.y;
            x = x.x;
        }

        if (!me.rendered) {
            return me;
        }

        if (x !== undefined || y !== undefined) {
            me.el.setBox(x, y);
            me.onPosition(x, y);
            me.fireEvent('move', me, x, y);
        }
        return me;
    },

    /* @private
     * Called after the component is moved, this method is empty by default but can be implemented by any
     * subclass that needs to perform custom logic after a move occurs.
     * @param {Number} x The new x position
     * @param {Number} y The new y position
     */
    onPosition: Ext.emptyFn,

<span id='Ext-AbstractComponent-method-setWidth'>    /**
</span>     * Sets the width of the component.  This method fires the {@link #resize} event.
     * @param {Number} width The new width to setThis may be one of:&lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
     * &lt;li&gt;A Number specifying the new width in the {@link #getEl Element}'s {@link Ext.core.Element#defaultUnit}s (by default, pixels).&lt;/li&gt;
     * &lt;li&gt;A String used to set the CSS width style.&lt;/li&gt;
     * &lt;/ul&gt;&lt;/div&gt;
     * @return {Ext.Component} this
     */
    setWidth : function(width) {
        return this.setSize(width);
    },

<span id='Ext-AbstractComponent-method-setHeight'>    /**
</span>     * Sets the height of the component.  This method fires the {@link #resize} event.
     * @param {Number} height The new height to set. This may be one of:&lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
     * &lt;li&gt;A Number specifying the new height in the {@link #getEl Element}'s {@link Ext.core.Element#defaultUnit}s (by default, pixels).&lt;/li&gt;
     * &lt;li&gt;A String used to set the CSS height style.&lt;/li&gt;
     * &lt;li&gt;&lt;i&gt;undefined&lt;/i&gt; to leave the height unchanged.&lt;/li&gt;
     * &lt;/ul&gt;&lt;/div&gt;
     * @return {Ext.Component} this
     */
    setHeight : function(height) {
        return this.setSize(undefined, height);
    },

<span id='Ext-AbstractComponent-method-getSize'>    /**
</span>     * Gets the current size of the component's underlying element.
     * @return {Object} An object containing the element's size {width: (element width), height: (element height)}
     */
    getSize : function() {
        return this.el.getSize();
    },

<span id='Ext-AbstractComponent-method-getWidth'>    /**
</span>     * Gets the current width of the component's underlying element.
     * @return {Number}
     */
    getWidth : function() {
        return this.el.getWidth();
    },

<span id='Ext-AbstractComponent-method-getHeight'>    /**
</span>     * Gets the current height of the component's underlying element.
     * @return {Number}
     */
    getHeight : function() {
        return this.el.getHeight();
    },

<span id='Ext-AbstractComponent-method-getLoader'>    /**
</span>     * Gets the {@link Ext.ComponentLoader} for this Component.
     * @return {Ext.ComponentLoader} The loader instance, null if it doesn't exist.
     */
    getLoader: function(){
        var me = this,
            autoLoad = me.autoLoad ? (Ext.isObject(me.autoLoad) ? me.autoLoad : {url: me.autoLoad}) : null,
            loader = me.loader || autoLoad;

        if (loader) {
            if (!loader.isLoader) {
                me.loader = Ext.create('Ext.ComponentLoader', Ext.apply({
                    target: me,
                    autoLoad: autoLoad
                }, loader));
            } else {
                loader.setTarget(me);
            }
            return me.loader;

        }
        return null;
    },

<span id='Ext-AbstractComponent-method-setLoading'>    /**
</span>     * This method allows you to show or hide a LoadMask on top of this component.
     * @param {Boolean/Object/String} load True to show the default LoadMask, a config object
     * that will be passed to the LoadMask constructor, or a message String to show. False to
     * hide the current LoadMask.
     * @param {Boolean} targetEl True to mask the targetEl of this Component instead of the this.el.
     * For example, setting this to true on a Panel will cause only the body to be masked. (defaults to false)
     * @return {Ext.LoadMask} The LoadMask instance that has just been shown.
     */
    setLoading : function(load, targetEl) {
        var me = this,
            config;

        if (me.rendered) {
            if (load !== false &amp;&amp; !me.collapsed) {
                if (Ext.isObject(load)) {
                    config = load;
                }
                else if (Ext.isString(load)) {
                    config = {msg: load};
                }
                else {
                    config = {};
                }
                me.loadMask = me.loadMask || Ext.create('Ext.LoadMask', targetEl ? me.getTargetEl() : me.el, config);
                me.loadMask.show();
            } else if (me.loadMask) {
                Ext.destroy(me.loadMask);
                me.loadMask = null;
            }
        }

        return me.loadMask;
    },

<span id='Ext-AbstractComponent-method-setDocked'>    /**
</span>     * Sets the dock position of this component in its parent panel. Note that
     * this only has effect if this item is part of the dockedItems collection
     * of a parent that has a DockLayout (note that any Panel has a DockLayout
     * by default)
     * @return {Component} this
     */
    setDocked : function(dock, layoutParent) {
        var me = this;

        me.dock = dock;
        if (layoutParent &amp;&amp; me.ownerCt &amp;&amp; me.rendered) {
            me.ownerCt.doComponentLayout();
        }
        return me;
    },

    onDestroy : function() {
        var me = this;

        if (me.monitorResize &amp;&amp; Ext.EventManager.resizeEvent) {
            Ext.EventManager.resizeEvent.removeListener(me.setSize, me);
        }
        Ext.destroy(me.componentLayout, me.loadMask);
    },

<span id='Ext-AbstractComponent-method-destroy'>    /**
</span>     * Destroys the Component.
     */
    destroy : function() {
        var me = this;

        if (!me.isDestroyed) {
            if (me.fireEvent('beforedestroy', me) !== false) {
                me.destroying = true;
                me.beforeDestroy();

                if (me.floating) {
                    delete me.floatParent;
                    // A zIndexManager is stamped into a *floating* Component when it is added to a Container.
                    // If it has no zIndexManager at render time, it is assigned to the global Ext.WindowManager instance.
                    if (me.zIndexManager) {
                        me.zIndexManager.unregister(me);
                    }
                } else if (me.ownerCt &amp;&amp; me.ownerCt.remove) {
                    me.ownerCt.remove(me, false);
                }

                if (me.rendered) {
                    me.el.remove();
                }

                me.onDestroy();

                // Attempt to destroy all plugins
                Ext.destroy(me.plugins);

                Ext.ComponentManager.unregister(me);
                me.fireEvent('destroy', me);

                me.mixins.state.destroy.call(me);

                me.clearListeners();
                me.destroying = false;
                me.isDestroyed = true;
            }
        }
    },

<span id='Ext-AbstractComponent-method-getPlugin'>    /**
</span>     * Retrieves a plugin by its pluginId which has been bound to this
     * component.
     * @returns {Ext.AbstractPlugin} pluginInstance
     */
    getPlugin: function(pluginId) {
        var i = 0,
            plugins = this.plugins,
            ln = plugins.length;
        for (; i &lt; ln; i++) {
            if (plugins[i].pluginId === pluginId) {
                return plugins[i];
            }
        }
    },
    
<span id='Ext-AbstractComponent-method-isDescendantOf'>    /**
</span>     * Determines whether this component is the descendant of a particular container.
     * @param {Ext.Container} container
     * @returns {Boolean} isDescendant
     */
    isDescendantOf: function(container) {
        return !!this.findParentBy(function(p){
            return p === container;
        });
    }
}, function() {
    this.createAlias({
        on: 'addListener',
        prev: 'previousSibling',
        next: 'nextSibling'
    });
});
</pre></pre></body></html>